Question

这是表格互动的一部分。

用户可以从一系列活动中进行选择。其中6项活动的价格为100，其中一项定价为200。

当用户选中复选框时，会出现一个标签，告诉用户总价格是多少。

目前，价格正在计算中。

但每次检查一个方框时，都会添加一个新标签。而不是更新旧的。为什么会这样？

这是我的代码：

// Register for Activities section of the form.
document.querySelector(".activities").addEventListener("change", function(){
    var main = document.getElementById("all");
    var framework = document.getElementById("framework");
    var libs = document.getElementById("libs");
    var express = document.getElementById("express");
    var node = document.getElementById("node");
    var build = document.getElementById("build");
    var npm = document.getElementById("npm");

    // Calculate running total of price of events selected
    var mainPrice = 200;
    var otherPrice = 100;
    var totalPrice = 0;
    var totalLabel;


    if(!totalLabel){
        totalLabel = document.createElement('label');
        activities.appendChild(totalLabel);
    }

    if(main.checked == true){
        totalPrice += mainPrice;
    }
    if(framework.checked == true || express.checked == true) {
        totalPrice += otherPrice;
    } 
    if(libs.checked == true || node.checked == true) {
        totalPrice += otherPrice;
    } 
    if(build.checked == true) {
        totalPrice += otherPrice;
    } 
    if(npm.checked == true) {
        totalPrice += otherprice;
    }

    var totalNumber = totalPrice.toString();
    var totalText = "Total is $" + totalNumber;

    totalLabel.innerHTML = totalText;
});

我之前认为这将是一个问题，我认为如果totalLabel已经存在，只会创建一个新元素，这样可以解决这个问题：

if(!totalLabel){
        var totalLabel = document.createElement('label');
        activities.appendChild(totalLabel);
    }

有什么建议吗？

Answer 1

你有一个范围问题。 totalLabel，在您创建它时，只存在于函数内部。

放一个＆＃34; var totalLabel＆＃34;在功能范围之外，失去了＆＃34; var＆＃34;来自if块。所以喜欢：

var totalLabel;
document.querySelector...

Answer 2

你可以试试这个：

var totalLabel;

totalLabel = document.createElement('label');
activities.appendChild(totalLabel);

document.querySelector(".activities").addEventListener("change", function(){
  // code

  // comment below code
  //if(!totalLabel){
  //  totalLabel = document.createElement('label');
  //  activities.appendChild(totalLabel);
  // }

  // code
});

为什么我的程序会不断创建新元素？

2 个答案: