[英]Add value to JavaScript variable when checkbox is checked
This is the simple app for calculating the total price of selected elements of computer hardware. 这是用于计算计算机硬件所选元素总价的简单应用程序。 It should work with innerHTML and change it dinamically.
它应该与innerHTML一起使用并进行动态更改。
The problem is that with my code, nothing happens, so you can check it on my fiddle or just look at the code below. 问题在于我的代码没有任何反应,因此您可以在我的小提琴上对其进行检查或仅查看下面的代码。 It should change the price in the last box???
它应该在最后一个框中更改价格???
Code: 码:
<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 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 + " €";
There are a few problems 有几个问题
document.getElementById('total').innerHTML = price;
document.getElementById('total').innerHTML = price;
inside check
so that it updates when you click the checkbox; check
以便在您单击复选框时更新; add
variable add
变量中的现有值 Change your code to the following http://jsfiddle.net/mendesjuan/3ja4X/3/ 将您的代码更改为以下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();
For even cleaner code, you can use the following http://jsfiddle.net/mendesjuan/3ja4X/4/ 为了获得更清晰的代码,您可以使用以下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);
Add your calculations inside the check function, or make it calculate after the numbers are added: 将您的计算结果添加到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;
}
This the code does not only run once when the page is loaded. 该代码不仅在页面加载后运行一次。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.