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，您稍后会用它来获取所选的选项值：

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

计算器中的Javascript乘法问题

1 个答案: