用js和html进行简单的数学计算
我在小提琴示例中遇到两个问题。首先，当您单击复选框时，它应该立即进行计算，但事实并非如此。您只需首先更改保管箱值，然后检查值，然后它就可以工作了。有谁知道从复选框中选择值后该怎么做才能得到结果？我需要默认选择标准选项。第二件事是我需要从相同的值但小于 10% 和 20% 的值中获得结果。
var checkboxes = document.querySelectorAll('.sum')
var select = document.querySelector('#select')
var total = document.querySelector('#payment-total,#payment-total-2')
var checkboxesTotal = 0
var selectTotal = 0
checkboxes.forEach(function(input) {
input.addEventListener('change', onCheckboxSelect)
})
select.addEventListener('change', onSelectChange)
function onCheckboxSelect(e) {
var sign = e.target.checked ? 1 : -1
checkboxesTotal += sign * parseInt(e.target.value, 10)
renderTotal()
}
function onSelectChange(e) {
var value = parseInt(e.target.value, 10)
if (!isNaN(value)) {
selectTotal = value
renderTotal()
}
}
function renderTotal() {
total.innerHTML = checkboxesTotal * selectTotal
}
<ul>
<li><label class="checkbox" for="Checkbox1">
<input value="190" type="checkbox" class="sum"> Value 1
</label></li>
<li><label class="checkbox">
<input value="190" type="checkbox" class="sum"> Value 2
</label></li>
<li><label class="checkbox">
<input value="170" type="checkbox" class="sum"> Value 3
</label></li>
</ul>
<br/>
<br/>
<select id="select" name="select">
<option value="1" class="sum">Basic</option>
<option value="2" class="sum" selected="selected">Standard</option>
<option value="3" class="sum">Premium</option>
</select>
<br/>
<p>3 months <br>sum: <span id="payment-total">0</span> ;- month.</p>
<p>6 months (10% off) <br>sum: <span id="payment-total-2">0</span> ;- month.</p>
<p>12 months (20% off) <br>sum: <span id="payment-total-3">0</span> ;- month.</p>
侃侃尔雅2回答
-
拉丁的传说
复选框的问题在于您正在设置 的初始值，var selectTotal = 0并且在选中一个复选框时，将使用 进行计算selectTotal = 0，这意味着total3.innerHTML = checkboxesTotal * selectTotal = 190 * 0 = 0（对于选中的第一个复选框）。selectTotal您可以通过初始化为默认值（标准）来更改它，2或者在选中复选框时，您可以从下拉列表中获取选定的值。第一种方法是var selectTotal = 2：var checkboxes = document.querySelectorAll('.sum')var select = document.querySelector('#select')var total3 = document.querySelector('#payment-total')var total6 = document.querySelector('#payment-total2')var total12 = document.querySelector('#payment-total3')var checkboxesTotal = 0;var selectTotal = 2; // Standard (default dropdown value)checkboxes.forEach(function(input) { input.addEventListener('change', onCheckboxSelect)})select.addEventListener('click', onSelectChange)function onCheckboxSelect(e) { var sign = e.target.checked ? 1 : -1 checkboxesTotal += sign * parseInt(e.target.value, 10) renderTotal()}function onSelectChange(e) { var value = parseInt(e.target.value, 10) if (!isNaN(value)) { selectTotal = value renderTotal() }}function renderTotal() { total3.innerHTML = checkboxesTotal * selectTotal total6.innerHTML = (checkboxesTotal * selectTotal / 100) * (-10) + (checkboxesTotal * selectTotal) total12.innerHTML = (checkboxesTotal * selectTotal / 100) * (-20) + (checkboxesTotal * selectTotal)}<ul><li><label class="checkbox"> <input value="190" type="checkbox" class="sum"> Wadowice</label></li><li><label class="checkbox"> <input value="190" type="checkbox" class="sum"> Kalwaria </label></li> <li><label class="checkbox"> <input value="170" type="checkbox" class="sum"> Zator </label></li></ul><br/><br/><select id="select" name="select"> <option value="1" class="sum">Basic</option> <option value="2" class="sum" selected="selected">Standard</option> <option value="3" class="sum">Premium</option> </select><br/><p>3 months <br>sum: <span id="payment-total">0</span> ;- month.</p><p>6 months <br>sum: <span id="payment-total2">0</span> ;- month.</p><p>12 months <br>sum: <span id="payment-total3">0</span> ;- month.</p>第二种方法是在选择复选框时获取下拉值：var checkboxes = document.querySelectorAll('.sum')var select = document.querySelector('#select')var total3 = document.querySelector('#payment-total')var total6 = document.querySelector('#payment-total2')var total12 = document.querySelector('#payment-total3')var checkboxesTotal = 0;var selectTotal = 0;checkboxes.forEach(function(input) { input.addEventListener('change', onCheckboxSelect)})select.addEventListener('click', onSelectChange)function onCheckboxSelect(e) { var sign = e.target.checked ? 1 : -1 checkboxesTotal += sign * parseInt(e.target.value, 10) var select = document.getElementById("select"); // get selected value and assign it to the global variable selectTotal selectTotal = select.options[select.selectedIndex].value; renderTotal()}function onSelectChange(e) { var value = parseInt(e.target.value, 10) if (!isNaN(value)) { selectTotal = value renderTotal() }}function renderTotal() { total3.innerHTML = checkboxesTotal * selectTotal total6.innerHTML = (checkboxesTotal * selectTotal / 100) * (-10) + (checkboxesTotal * selectTotal) total12.innerHTML = (checkboxesTotal * selectTotal / 100) * (-20) + (checkboxesTotal * selectTotal)}<ul><li><label class="checkbox"> <input value="190" type="checkbox" class="sum"> Wadowice</label></li><li><label class="checkbox"> <input value="190" type="checkbox" class="sum"> Kalwaria </label></li> <li><label class="checkbox"> <input value="170" type="checkbox" class="sum"> Zator </label></li></ul><br/><br/><select id="select" name="select"> <option value="1" class="sum">Basic</option> <option value="2" class="sum" selected="selected">Standard</option> <option value="3" class="sum">Premium</option> </select><br/><p>3 months <br>sum: <span id="payment-total">0</span> ;- month.</p><p>6 months <br>sum: <span id="payment-total2">0</span> ;- month.</p><p>12 months <br>sum: <span id="payment-total3">0</span> ;- month.</p> -
凤凰求蛊
好的，我找到了百分比问题的解决方案，现在它完成了所需的工作。但仍在尝试找出复选框。在您单击下拉菜单之前，他们仍然不会响应。提前致谢！var checkboxes = document.querySelectorAll('.sum')var select = document.querySelector('#select')var total3 = document.querySelector('#payment-total')var total6 = document.querySelector('#payment-total2')var total12 = document.querySelector('#payment-total3')var checkboxesTotal = 0var selectTotal = 0checkboxes.forEach(function(input) { input.addEventListener('change', onCheckboxSelect)})select.addEventListener('click', onSelectChange)function onCheckboxSelect(e) { var sign = e.target.checked ? 1 : -1 checkboxesTotal += sign * parseInt(e.target.value, 10) renderTotal()}function onSelectChange(e) { var value = parseInt(e.target.value, 10) if (!isNaN(value)) { selectTotal = value renderTotal() }}function renderTotal() { total3.innerHTML = checkboxesTotal * selectTotal total6.innerHTML = (checkboxesTotal * selectTotal / 100) * (-10) + (checkboxesTotal * selectTotal) total12.innerHTML = (checkboxesTotal * selectTotal / 100) * (-20) + (checkboxesTotal * selectTotal)}<ul><li><label class="checkbox"> <input value="190" type="checkbox" class="sum"> Wadowice</label></li><li><label class="checkbox"> <input value="190" type="checkbox" class="sum"> Kalwaria </label></li> <li><label class="checkbox"> <input value="170" type="checkbox" class="sum"> Zator </label></li></ul><br/><br/><select id="select" name="select"> <option value="1" class="sum">Basic</option> <option value="2" class="sum" selected="selected">Standard</option> <option value="3" class="sum">Premium</option> </select><br/><p>3 months <br>sum: <span id="payment-total">0</span> ;- month.</p><p>6 months <br>sum: <span id="payment-total2">0</span> ;- month.</p><p>12 months <br>sum: <span id="payment-total3">0</span> ;- month.</p>
随时随地看视频慕课网APP
相关分类
JavaScript