Javascript报价计算器提供意外的输出

这里是我的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>

正如我在选择其他选项时测试的

1

width and Height working fine，并给出预期输出。但如果我改变选择选项。它给了我错误的输出

例如：宽度：1*高度：1*表面光洁度要求：1*

currentSurfaceMaterial:1.3

输出为：55。但它应该只有1.3（1*1*1*1.3=1.3），对吗？

而不是使用：

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;

---

通过下面的代码在a中更新，您没有指定select元素

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;

---

让我们从问题的实质开始；您在

surfacefunc

和

materialfunc

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

该方法将获得整个页面中的所有

选项

元素，其中共有7个元素（2个曲面和5个材质）

当您更改每个下拉列表的选定索引时，您将检索该下拉列表的

selectedIndex

，但随后在所有选项的整个列表中使用该索引来查找值-这是行不通的

您需要做的是更具体地说明您想要哪些选项，您可以通过对实际的select元素而不是整个

文档发出调用
getElementsByTagName
来实现这一点，或者只使用
.options[index]
访问select elements选项

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;
}

因为它做了完全相同的事情


另一个问题是，对于文本字段，您只需在单击时重新计算总数，这意味着只有在首次输入字段时（假设是通过单击该字段而不是（例如）使用tab键来完成）。你可以考虑使用<代码> Onchange < /C>或<代码> Onbule。
 DROPDENS不拾取初始值，因此，在更改其中一个或两个代码之前，您可以得到<代码> 0美元<代码>。至少以OP最初的方式，这个问题不存在。我认为这个问题简单而容易。我以前用过它，不知怎么的，它没有给我输出，但现在它工作了
function materialfunc()
{
   return document.getElementById("CurrentSurfaceMaterial").value;
}