Saya ingin menambahkan nilai dari kotak centang dan menu tarik-turun menggunakan JavaScript (tanpa JQuery).

Pertanyaan pertama saya adalah bagaimana cara terbaik untuk melakukan ini ... kode saya di bawah.

Pertanyaan kedua adalah apakah ada kerugian menggunakan fungsi anonim untuk melakukan ini?

Terima kasih!

https://jsfiddle.net/Buleria28/4ysvgkz8/

HTML

<label class="checkbox" for="Checkbox1">
        <input value="50" type="checkbox" class="sum" > box 1
 </label>
 <label class="checkbox">
        <input value="50"  type="checkbox" class="sum" > box 2
  </label>
  <label class="checkbox">
        <input value="50"  type="checkbox" class="sum" > box 3
  </label>

    <br/><br/>

    <select id="select" name ="select">
        <option class="sum"></option>
        <option value="1" class="sum">option 1</option>
        <option value="2" class="sum">option 2</option>
        <option value="5" class="sum">option 3</option>
    </select>
    <br/><br/>

    Total: $<span id="payment-total">0</span>

JavaScript

/*To get checkbox values*/

var inputs = document.getElementsByClassName('sum'),
total  = document.getElementById('payment-total');

 for (var i=0; i < inputs.length; i++) {
    inputs[i].onchange = function() {
        var checkAdd = this.value * (this.checked ? 1 : -1);
        total.innerHTML = parseFloat(total.innerHTML) + checkAdd;
    }
 }

/*To get select values*/
var dropdown= document.getElementById("select");

for(j=0; j<dropdown.options.length;j++){

    dropdown[j].onchange = function() {
       if (dropdown[i].options.checked){
       var selectAdd = dropdown.options[dropdown.selectedIndex].value;
      total.innerHTML = parseFloat(total.innerHTML) + selectAdd;
      } 
   }
 }
0
user3063771 10 Agustus 2017, 01:05

2 jawaban

Jawaban Terbaik

Beberapa hal yang ingin saya tekankan:

  • Gunakan addEventListener untuk bing event handler

  • Anda dapat menggunakan fungsi anonim tetapi lebih jelas ketika Anda mendeklarasikannya dan memberinya nama yang bermakna

  • Jangan simpan jumlah total dalam elemen HTML. Simpan dalam variabel dan kemudian masukkan ke dalam HTML.

Saya akan melakukannya seperti itu:

var checkboxes = document.querySelectorAll('.sum')
var select = document.querySelector('#select')
var total = document.querySelector('#payment-total')
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
}
<label class="checkbox" for="Checkbox1">
    <input value="50" type="checkbox" class="sum"> box 1
  </label>
<label class="checkbox">
    <input value="50" type="checkbox" class="sum"> box 2
  </label>
<label class="checkbox">
    <input value="50" type="checkbox" class="sum"> box 3
  </label>


<br/>
<br/>

<select id="select" name="select">
    <option class="sum"></option>
    <option value="1" class="sum">option 1</option>
    <option value="2" class="sum">option 2</option>
    <option value="5" class="sum">option 3</option>
  </select>

<br/>
<br/> Total: $<span id="payment-total">0</span>
0
lukaleli 9 Agustus 2017, 22:41

Berikut adalah koreksi untuk JS mengenai elemen select, saya menambahkan komentar sebaris, silakan periksa untuk klarifikasi:

/*To get select values*/
var dropdown = document.getElementById("select");
dropdown.onchange = function() {
  var value = parseInt(this.value); // gets the selected value from "select" and tries to convert it to int
  if(!isNaN(value)) { // if conversion is OK, i.e. it was a number
    total.innerHTML = parseFloat(total.innerHTML) + value; // this line is copied from your previous code
  }
}
0
ihpar 9 Agustus 2017, 22:14