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

中更新

Answer 2

通过以下代码，您没有指定选择元素

document.getElementsByTagName("option")[x].value

您需要这样做，以便您可以选择正确的选择

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

surface_price = x.options[x.selectedIndex].value;

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

material_price = y.options[y.selectedIndex].value;

Fiddle

Answer 3

让我们从实际问题开始;您在surfacefunc和materialfunc

中使用此代码

document.getElementsByTagName("option")....

该方法将在整个页面中所有 option个元素，其中共有7个元素（2个曲面和5个材质）。

当您更改每个下拉列表的选定索引时，您将检索该下拉列表的selectedIndex，但随后在所有选项的整个列表中使用该索引来查找值 - 这永远不会起作用

您需要做的是更具体地了解您想要哪些选项，您可以通过针对实际的select元素发出对getElementsByTagName的调用来实现这一点，而不是整个{ {1}}，或只使用document访问选择元素选项。

.options[index]

就此而言，你也可以完全缩短它

function materialfunc()
{
    var material_price=0;
    var elem = document.getElementById("CurrentSurfaceMaterial");

    material_price = elem.options[elem.selectedIndex].value;

    return material_price;
}

因为它完全一样。

另一个问题是，对于文本字段，您只需重新计算总function materialfunc() { return document.getElementById("CurrentSurfaceMaterial").value; }，这意味着仅在首次进入字段时（假设通过点击它而不是，例如，标签到它）。您可以考虑另外使用onclick或onchange。

Javascript引用计算器提供意外的输出

3 个答案: