计算器中的Javascript乘法问题

Question

Multiplying 'Area' value with one of three separate fixed values (types of paint:Premium/Luxury/Regular) so as to calculate the total. There are three values to choose from the dropdown option, but the calculator function always loads the last value as the multiplier.

Calculator works with one fixed value only

 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

You are not supposed to have multiple

calculator.calculate.onclick = function() {}

You must have only one, where you get the selected value of your <select> , and do the calculations.

Your <select> could have an id you would use later to get selected option value :

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

Then in your JS side :

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