[英]Add value to JavaScript variable when checkbox is checked
這是用於計算計算機硬件所選元素總價的簡單應用程序。 它應該與innerHTML一起使用並進行動態更改。
問題在於我的代碼沒有任何反應,因此您可以在我的小提琴上對其進行檢查或僅查看下面的代碼。 它應該在最后一個框中更改價格???
碼:
<table style="width:230px;padding:5px;border:1px solid #f0f0f0;font-size:14px;">
<tr style="background-color:#f0f0f0;">
<th style="width:200px;text-align:left;">Elements</th>
<th align="center"></th>
</tr>
<tr style="border-bottom:1px solid #a3a3a3;">
<td>CPU unit</td>
<td align="center">✓</td>
</tr>
<tr>
<tr>
<td>Motherboard</td>
<td align="center">✓</td>
</tr>
<td>Graphic card</td>
<td align="center"><input type="checkbox" id="id_1" value="25" onchange="check();"></td>
</tr>
<tr>
<td>Memory chip</td>
<td align="center"><input type="checkbox" name="" value="" onchange="check();></td>
</tr>
<tr>
<td>Monitor</td>
<td align="center"><input type="checkbox" name="" value="" onchange="check();></td>
</tr>
</table>
<table style="width:220px;padding:1px;border:1px solid #f0f0f0;font-size:22px; font-weight:bold;">
<tr style="border-bottom:1px solid #a3a3a3;text-align:center;background-color:#80CCDC">
<td id="total"><script>document.getElementById('total').innerHTML = price;</script></td></tr><tr>
</table>
JAVASCRIPT
var basic = 300;
var add = 0;
function check()
{
if(document.getElementById("id_1").checked) {
add = 120;
}
if(document.getElementById("id_1").checked) {
add = 40;
}
if(document.getElementById("id_1").checked) {
add = 90;
}
}
var p = basic + add;
var price = p + " €";
有幾個問題
document.getElementById('total').innerHTML = price;
內部check
以便在您單擊復選框時更新; add
變量中的現有值 將您的代碼更改為以下http://jsfiddle.net/mendesjuan/3ja4X/3/
function check() {
var basic = 300;
var add = 0;
if(document.getElementById("id_1").checked) {
add += 120;
}
if(document.getElementById("id_2").checked) {
add += 40;
}
if(document.getElementById("id_3").checked) {
add += 90;
}
var p = basic + add;
var price = p + " €";
document.getElementById('total').innerHTML = price;
}
check();
為了獲得更清晰的代碼,您可以使用以下http://jsfiddle.net/mendesjuan/3ja4X/4/
function updateTotal(){
var basic = 300;
var add = 0;
var form = document.getElementById('form');
// Store the value for each item in the checkbox so
// you don't need to have three separate `if`s and IDs for them.
var checkboxes = form.getElementsByClassName('addon');
for (var i=0; i < checkboxes.length; i ++) {
if (checkboxes[i].checked) {
add += parseInt(checkboxes[i].value, 10);
}
}
var p = basic + add;
var price = p + " €";
document.getElementById('total').innerHTML = price;
}
// Hookup handlers from JS, not in the HTML from a single
// place using event delegation
document.getElementById('form').addEventListener('change', updateTotal);
將您的計算結果添加到check函數中,或在添加數字后進行計算:
function check(){
if(document.getElementById("id_1").checked) {
add = 120;
}
if(document.getElementById("id_1").checked) {
add = 40;
}
if(document.getElementById("id_1").checked) {
add = 90;
}
var p = basic + add;
var price = p + " €";
document.getElementById('total').innerHTML = price;
}
該代碼不僅在頁面加載后運行一次。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.