计算器中的Javascript乘法问题

Question

将“面积”值乘以三个单独的固定值之一（油漆类型：高级/豪华/常规），以计算总和。 从下拉选项中可以选择三个值，但是计算器功能始终将最后一个值作为乘数加载。

计算器只能使用一个固定值

 window.onload = function(){ function findID(id) { //function to make 'getElementById easier to maintain; return document.getElementById(id); } var calculator = { multOne: findID('mult-one'), multTwo: findID('mult-two'), multThree: findID('mult-three'), multFour: findID('mult-four'), product: findID('product'), calculate: findID('calculate'), clear: findID('clear') }; // Onclick Events for buttons calculator.clear.onclick = function() { calculator.multOne.value = ''; calculator.multTwo.value = ''; calculator.multThree.value = ''; calculator.multFour.value = ''; calculator.product.value = 'Please Refresh your browser'; console.log(result = 0); } calculator.calculate.onclick = function() { var result = calculator.multOne.value * calculator.multTwo.value; console.log(result); if(isNaN(result)) { calculator.product.value = 'Not Valid - Try Again!!' } else { calculator.product.value = result; } } calculator.calculate.onclick = function() { var result = calculator.multOne.value * calculator.multThree.value; console.log(result); if(isNaN(result)) { calculator.product.value = 'Not Valid - Try Again!!' } else { calculator.product.value = result; } } calculator.calculate.onclick = function() { var result = calculator.multOne.value * calculator.multFour.value; console.log(result); if(isNaN(result)) { calculator.product.value = 'Not Valid - Try Again!!' } else { calculator.product.value = result; } } } 

 <form method="post"> <p class="home-widget-caption" style="color:#ff4102; font-size:14px;">Type of Paint</p> <select name="types" style="width:120px"> <option id="mult-two" value="30">Luxury</option> <option id="mult-three" value="20">Premium</option> <option id="mult-four" value="10">Regular</option> </select> <br> <p class="home-widget-caption" style="color:#ff4102; font-size:14px; margin-top:10px;">Painting Area</p> <input type="text" id="mult-one" style="width:120px">&nbsp;<span style="color:#999999">sq.ft.</span> <br><br> <div style="text-align:center"> <button type="button" id="calculate" style="padding:10px 30px 10px 30px; margin-bottom:15px">Calculate My painting cost</button> <button type="button" id="clear" style="display:none">Clear</button> </div> <p class="home-widget-caption" style="color:#ff4102; font-size:16px">Your total expenditure</p> <input type="text" id="product" style="width:270px"> <br><br> </form> 

Answer 1

你不应该有多个

calculator.calculate.onclick = function() {}

您必须只有一个，您可以在其中获得<select>的选定值并进行计算。

您的<select>可能具有一个ID，以后您将使用该ID来获取选定的选项值：

<select id="typesID" name="types" style="width:120px">
        <option id="mult-two" value="30">Luxury</option>
        <option id="mult-three" value="20">Premium</option>
        <option id="mult-four" value="10">Regular</option>
     </select>

然后在您的JS端：

calculator.calculate.onclick = function() {
    var e = document.getElementById("typesID");
    var selectedValue = e.options[e.selectedIndex].value;

    var result = calculator.multOne.value * selectedValue;
    console.log(result);
    if(isNaN(result)) {
        calculator.product.value = 'Not Valid - Try Again!!'
    }
    else {
        calculator.product.value = result;
    }
}