在javascript中重新单击按钮时如何更新元素答案

【问题标题】：How to update an element when a button is re-clicked in javascript在javascript中重新单击按钮时如何更新元素
【发布时间】：2019-03-05 12:15:31
【问题描述】：

我只是想在小型应用程序中重新单击按钮时更新 div p 元素的内容。我正在编写大量的 DOM 脚本，并且几乎在 JS 中创建了所有 HTML。有一个单选按钮选择列表，基于选中的按钮，一个包含结果的 div 元素被创建并显示在页面正文的末尾。

mainBody[0].appendChild(resultBox);

问题是，如果我重新单击按钮重新计算，则会创建另一个 div 并将其添加到正文中。我试过用 css 改变类，但它不起作用，我有点困惑。

我怎样才能把它换成一个新的？

一些代码sn-ps

 // assign onclick function to calculate button
 document.getElementById("calc-btn").onclick = function() {
    var totalScore = 0;
    var inputs = document.getElementsByTagName("input");
    for (let i = 0; i < inputs.length; i++) {
        var current = document.getElementsByTagName("input")[i];
        if (current.getAttribute("type") === "radio" && current.getAttribute("checked") === "true") {
            totalScore += parseInt(current.value);
        }
    }

    var resultBox = document.createElement("div");
    resultBox.setAttribute("class", "result-box");
    var resultHeading = document.createElement("h3");
    resultBox.appendChild(resultHeading);
    var headingText = document.createTextNode("Your Results");
    resultHeading.appendChild(headingText);
    var paragraph = document.createElement("p");
    resultBox.appendChild(paragraph);

    var resultText = calculateResult(totalScore);
    paragraph.appendChild(resultText);

    mainBody[0].appendChild(resultBox);

    if (resultBox.className == "result-box") {
        resultBox.className = "result-displayed";
    } else {
        resultBox.className = "result-box";
    }
}

css

.result-box {
    display: none;
}

.result-displayed {
    display: block !important;
    background-color: #fff;
    border: 1px solid rgb(43, 41, 41);
    width: 60%;
    margin: 0 auto !important;
    border-radius: 15px;
    color: #111;
    font-size: 18px;
}

.result-displayed p {
    margin-top: 0 !important;
    font-size: 16px;
    text-align: justify;
    padding: 2%;
}

【问题讨论】：

您可以尝试在正文末尾添加一个带有 id 的 div，然后每次都重复使用它来替换其中的 html 而不是追加。

标签： javascript dom button element

【解决方案1】：

您可以尝试使用 .removeChild(elem) 删除旧 div 本身

element.parentNode.removeChild(element);

在添加新内容之前，或者更新 div 的内容，而不是每次都生成它。

【讨论】：

我希望它被隐藏，然后当按钮被点击时它会出现所以我猜我必须在点击时附加它，这意味着我不能删除附加的行或者我弄错了?

【解决方案2】：

您应该先删除旧的。您可以在创建元素时简单地添加一个 id，例如

resultBox.setAttribute('id', 'any_id');

在添加新元素时，只需先删除该元素。然后添加一个新的。

var oldElement = document.getElementById('any_id');
oldElement.parentNode.removeChild(oldElement);

然后做你的事情......

【讨论】：

你先设置了它的id吗？
var nodeList = mainBody[0].childNodes; for (let i = 0; i