Почему моя программа продолжает создавать новые элементы?

Question

Это часть интерактивности формы.

Пользователь может выбрать один из нескольких видов деятельности. 6 из них оцениваются как 100, одна из них по цене 200.

Когда пользователь проверяет флажки, появляется метка, сообщающая пользователю, что представляет собой общая цена.

Прямо сейчас, цена в порядке.

Но каждый раз, когда установлен флажок, добавляется метка NEW. В отличие от обновления старого. Почему это происходит?

Это мой код:

// 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, поскольку вы его создаете, живет только внутри функции.

Поместите «var totalLabel» за пределы области действия и потеряйте «var» из блока 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 
});