选中复选框时向JavaScript变量添加值

这是一个简单的应用程序，用于计算选定计算机硬件元素的总价。它应该与innerHTML一起工作，并进行动态更改

问题是，对于我的代码，什么都不会发生，所以你可以在我的小提琴上检查它，或者只看下面的代码。它应该改变最后一个盒子里的价格

代码：

---

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

---

此代码在加载页面时不会只运行一次。

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

---

这意味着加载页面时，代码不会只运行一次。

存在一些问题

• 您需要调用

  document.getElementById（'total'）。innerHTML=price内部
  选中
  ，以便在单击复选框时更新
  不能有多个具有相同ID的项目。我已将它们更改为ID_1、ID_2、ID_3
  您需要添加到
  add
  变量中的现有值
  您必须连接所有复选框的更改，而不仅仅是第一个复选框
  

将代码更改为以下内容

对于更干净的代码，您可以使用以下代码

函数updateTotal（）{
var基本=300；
var-add=0；
var form=document.getElementById（'form'）；
//将每个项目的值存储在复选框中，以便
//您不需要为它们设置三个单独的'if'和'id'。
var复选框=form.getElementsByClassName（'addon'）；
对于（变量i=0；i

有几个问题

• 您需要调用

  document.getElementById（'total'）。innerHTML=price内部
  选中
  ，以便在单击复选框时更新
  不能有多个具有相同ID的项目。我已将它们更改为ID_1、ID_2、ID_3
  您需要添加到
  add
  变量中的现有值
  您必须连接所有复选框的更改，而不仅仅是第一个复选框
  

将代码更改为以下内容

对于更干净的代码，您可以使用以下代码

函数updateTotal（）{
var基本=300；
var-add=0；
var form=document.getElementById（'form'）；
//将每个项目的值存储在复选框中，以便
//您不需要为它们设置三个单独的'if'和'id'。
var复选框=form.getElementsByClassName（'addon'）；
对于（变量i=0；i

你就快到了。没有理由让你的脚本（在html中更新价格的脚本）运行不止一次。我更新了小提琴，但仍然没有解决方案。。。你能更新一下吗？你快到了。没有理由让你的脚本（在html中更新价格的脚本）运行不止一次。我更新了小提琴，但仍然没有解决方案。。。你能更新一下吗？我更新了这个，但是还有很多其他的问题，单是这个不能让它工作。我更新了这个，但是还有很多其他的问题，单是这个不能让它工作

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

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();

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 + " &euro;"; 
    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);