Javascript 报价计算器给出意想不到的输出

Question

这是我的 HTML 代码

   <form id="quoteform" onsubmit="return false;">
            <fieldset>
            <legend>Job Calculator!</legend>
            <p>
            <label for="includecandles" class="inlinelabel">
            Width : </label>
            <input type="text" id="width" name="width" onclick="calculateTotal()" />
            </p>
            <p>
            <label class="inlinelabel" for="includeinscription">
            Height : </label>
            <input type="text" id="height" name="height" onclick="calculateTotal()" />
            </p>

            <br />

            <select id="SurfaceFinishRequired" name="SurfaceFinishRequired" onchange="calculateTotal()">

            <option value="30">Solid(S) x 30</option>
            <option value="55">Flexible (F) x 55</option>
            </select>
            <br />


            <select id="CurrentSurfaceMaterial" name="CurrentSurfaceMaterial" onchange="calculateTotal()">
            <option value="1">Plain Concrete  x 1</option>
            <option value="1.3">Aggregate  Fine 4mm deep x 1.3</option>
            <option value="1.4">Aggregate  Medium 8mm deep x 1.4</option>
            <option value="1.5">Aggregate  Deep 12mm deep x 1.5</option>
            <option value="1.6">Aggregate  Deeo 12mm deep x 1.6</option>
            </select>

            <input type="submit" value="Calculate" class="btn btn-success btn-large pull-right" />
            <div id="totalPrice"></div>
            </fieldset>
        </form>

这是我的 Javascript 代码

function widthfunc()
{

    var width_price=0;



    width_price = document.getElementById("width").value;

    return width_price;

}

function heightfunc()
{

    var height_price=0;

    height_price = document.getElementById("height").value;

    return height_price;

}

function surfacefunc()
{

    var surface_price=0;

    var x = document.getElementById("SurfaceFinishRequired").selectedIndex;

    surface_price = document.getElementsByTagName("option")[x].value;

    return surface_price;

}

function materialfunc()
{

    var material_price=0;



    var y = document.getElementById("CurrentSurfaceMaterial").selectedIndex;

    material_price = document.getElementsByTagName("option")[y].value;

    return material_price;

}


function calculateTotal()
{

    var quote = widthfunc() * heightfunc() * surfacefunc() * materialfunc();

    //display the result
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Total Price is $"+quote;

}

function hideTotal()
{
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='none';
}

正如我在其他选项选择 1 时测试的那样，宽度和高度工作正常并提供预期的输出。但如果我改变选择选项。它给了我错误的输出。

举个例子:width:1 * Height:1 * SurfaceFinishedRequired : 1 * currentSurfaceMaterial : 1.3 输出是:55。但它应该只是 1.3 (1*1*1*1.3=1.3 )对吗？

Answer 1

而不是使用:

var x = document.getElementById("SurfaceFinishRequired").selectedIndex;
surface_price = document.getElementsByTagName("option")[x].value;

你应该使用:

surface_price = document.getElementById("SurfaceFinishRequired").value;

同样适用

material_price = document.getElementById("CurrentSurfaceMaterial").value;

更新于 Fiddle