Javascript Умножение вопроса в калькуляторе

Question

Умножение значения «Площадь» с одним из трех отдельных фиксированных значений (типы красок: Premium/Luxury/Regular), чтобы вычислить общее количество. Существует три значения, которые можно выбрать из раскрывающегося списка, но функция калькулятора всегда загружает последнее значение в качестве множителя.

Калькулятор работает с одним фиксированным значением только

window.onload = function(){ 
 
    function findID(id) { //function to make 'getElementById easier to maintain; 
 
    return document.getElementById(id); 
 

 
    } 
 
\t \t 
 
    var calculator = { 
 
    multOne: findID('mult-one'), 
 
    multTwo: findID('mult-two'), 
 
\t multThree: findID('mult-three'), 
 
\t multFour: findID('mult-four'), 
 
\t product: findID('product'), 
 
\t calculate: findID('calculate'), 
 
\t 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); 
 
} 
 
\t \t 
 
calculator.calculate.onclick = function() { 
 
\t var result = calculator.multOne.value * calculator.multTwo.value; 
 
\t console.log(result); 
 
\t if(isNaN(result)) { 
 
     calculator.product.value = 'Not Valid - Try Again!!' 
 
    } 
 
\t else { 
 
\t calculator.product.value = result; 
 
\t } 
 
} 
 

 
calculator.calculate.onclick = function() { 
 
\t var result = calculator.multOne.value * calculator.multThree.value; 
 
\t console.log(result); 
 
\t if(isNaN(result)) { 
 
\t  calculator.product.value = 'Not Valid - Try Again!!' 
 
    } 
 
\t else { 
 
\t \t calculator.product.value = result; 
 
\t } 
 
} 
 
\t \t 
 
calculator.calculate.onclick = function() { 
 
\t var result = calculator.multOne.value * calculator.multFour.value; 
 
\t console.log(result); 
 
\t if(isNaN(result)) { 
 
\t \t calculator.product.value = 'Not Valid - Try Again!!' 
 
    } 
 
\t else { 
 
\t \t calculator.product.value = result; 
 
\t } 
 
} 
 
}

<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> может иметь идентификатор вы будете использовать позже, чтобы получить выбранное значение параметра:

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