1
将“面积”值与三个单独的固定值(油漆类型:高级/豪华/常规)中的一个相乘以计算总和。 下拉选项有三个值可供选择,但计算器功能始终将最后一个值作为乘数加载。计算器中的Javascript乘法问题
计算器用一个固定值仅适用
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"> <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>
谢谢尼科! –
不客气。如果您认为这是您的解决方案,请不要忘记验证答案;-) – Niko