我正在编写一个简单的计算器,其结果取决于选择的选择器,问题是它不起作用,因为代码在if语句中停在第二个位置。我检查了几次if语句,它在退出时都为true。我是编码新手,我不知道是否可以将回调函数放到If语句中,也许这就是为什么它没有工作。
<strike><div class="section">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<h2 class="mb-4 section-title">Calculator</h2>
</div>
<div class="calculator">
<div class="stri area">
<div class="stri_text area_text">Type of material</div>
<div class="stri_input area_input"><select><option value="matt">Matt</option><option value="glossy">Glossy</option><option value="satin">Satin</option><option value="Тканевый">Тканевый</option></select></div>
</div>
<div class="stri material">
<div class="stri_text material_text">Area of a ceiling</div>
<div class="stri_input material_input"><input class="expenses-item"></div>
</div>
<div class="stri angles">
<div class="stri_text anglesl_text">Number of corners</div>
<div class="stri_input angles_input"><input class="expenses-item"></div>
</div>
<div class="stri chandelier">
<div class="stri_text chandelier_text">Number chandeliers</div>
<div class="stri_input chandelier_input"><input class="expenses-item"></div>
</div>
<div class="stri light">
<div class="stri_text light_text">Number of spotlights</div>
<div class="stri_input light_input"><input class="expenses-item"></div>
</div>
<div class="stri pipe">
<div class="stri_text pipe_text">Bypassing of pipes</div>
<div class="stri_input pipe_input"><input class="expenses-item"></div>
</div>
<div class="result_btn">
<button class="btn btn-lg">Рассчитать</button>
</div>
<div class="result">
<div class="stri_text result_text">TOTAL:</div>
<div class="result_num preserve-whitespace" id="result-item"> </div>
</div>
</div>
</div>
</div>
</div></strike>
'use strict';
let selectSelector = document.getElementsByTagName('select'),
optionsSelector = document.getElementsByTagName('option'),
expensesItem = document.getElementsByClassName('expenses-item'),
resultItem = document.getElementById('result-item'),
expensesBtn = document.getElementsByTagName('button')[1];
let sum;
expensesBtn.addEventListener('click', function () {
if (isNaN(expensesItem[0].value) || isNaN(expensesItem[1].value) || isNaN(expensesItem[2].value) || isNaN(expensesItem[3].value) || isNaN(expensesItem[4].value)) {
resultItem.textContent = "Введите числовые данные ...";
} else if (selectSelector.addEventListener('select', function () {
optionsSelector[0].value == "mat";
})) {
sum = +expensesItem[0].value + +expensesItem[1].value + +expensesItem[2].value + +expensesItem[3].value + +expensesItem[4].value;
resultItem.textContent = sum;
}
});
```````````````````````````````````````````````````````````````````````````````````````````````````
dom按钮的第一个索引为[0],增量和模式为“ + =”而不是“ = +”]
'use strict';
let selectSelector = document.getElementsByTagName('select'),
optionsSelector = document.getElementsByTagName('option'),
expensesItem = document.getElementsByClassName('expenses-item'),
resultItem = document.getElementById('resultitem'),
expensesBtn = document.getElementsByTagName('button')[0];
let sum=0;
expensesBtn.addEventListener('click', function () {
debugger;
if (isNaN(expensesItem[0].value) || isNaN(expensesItem[1].value) || isNaN(expensesItem[2].value) || isNaN(expensesItem[3].value) || isNaN(expensesItem[4].value)) {
resultItem.value = "Введите числовые данные ...";
} else {
sum += parseInt(expensesItem[0].value) + parseInt(expensesItem[1].value) + parseInt(expensesItem[2].value) + parseInt(expensesItem[3].value) + parseInt(expensesItem[4].value);
//alert(sum)
resultItem.innerText = sum;
}
});
<strike>
<div class="section">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<h2 class="mb-4 section-title">Calculator</h2>
</div>
<div class="calculator">
<div class="stri area">
<div class="stri_text area_text">Type of material</div>
<div class="stri_input area_input"><select id="rdselect"><option value="matt">Matt</option><option value="glossy">Glossy</option><option value="satin">Satin</option><option value="Тканевый">Тканевый</option></select></div>
</div>
<div class="stri material">
<div class="stri_text material_text">Area of a ceiling</div>
<div class="stri_input material_input"><input class="expenses-item"></div>
</div>
<div class="stri angles">
<div class="stri_text anglesl_text">Number of corners</div>
<div class="stri_input angles_input"><input class="expenses-item"></div>
</div>
<div class="stri chandelier">
<div class="stri_text chandelier_text">Number chandeliers</div>
<div class="stri_input chandelier_input"><input class="expenses-item"></div>
</div>
<div class="stri light">
<div class="stri_text light_text">Number of spotlights</div>
<div class="stri_input light_input"><input class="expenses-item"></div>
</div>
<div class="stri pipe">
<div class="stri_text pipe_text">Bypassing of pipes</div>
<div class="stri_input pipe_input"><input class="expenses-item"></div>
</div>
<div class="result_btn">
<button id="btn" type="button" class="btn btn-lg">Рассчитать</button>
</div>
<div class="result">
<div class="stri_text result_text">TOTAL:</div>
<div class="result_num preserve-whitespace" id="resultitem"> </div>
</div>
</div>
</div>
</div>
</div>
</strike>