チェックボックスからの値の追加とドロップダウン選択のオプション

Question

JavaScript（JQueryなし）を使用してチェックボックスとドロップダウンメニューから値を追加したいと思います。

私の最初の質問は、これを行うにはどのように最善の方法です...私のコードは荒々しいです。

2番目の質問は、これを行うために匿名関数を使用することには欠点がありますか？

ありがとうございました！

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; 
     } 
    } 
} 

Answer 1

私が指摘したいいくつかのもの：

• 使用addEventListenerは

• あなたは無名関数を使用することができますが、あなたがそれを宣言するとき、それは明確だと

それに意味のある名前を付け、イベントハンドラをビンビンにします

• HTML要素に合計を保持しないでください。変数にそれを保持し、HTMLに挿入します。

私はそのようにそれを行うだろう：

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>

Answer 2

がselect要素についてのJSのための補正である、私は、インラインコメントを追加し、明確化のためにそれらを確認してください。

/*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 
    } 
}