用js和html进行简单的数学计算

Question

我在小提琴示例中遇到两个问题。首先，当您单击复选框时，它应该立即进行计算，但事实并非如此。您只需首先更改保管箱值，然后检查值，然后它就可以工作了。有谁知道从复选框中选择值后该怎么做才能得到结果？我需要默认选择标准选项。第二件事是我需要从相同的值但小于 10% 和 20% 的值中获得结果。var checkboxes = document.querySelectorAll('.sum')var select = document.querySelector('#select')var total = document.querySelector('#payment-total,#payment-total-2')var checkboxesTotal = 0var selectTotal = 0checkboxes.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>

Answer 1

复选框的问题在于您正在设置 的初始值，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>

Answer 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 = 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)

  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>