Question

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

mainBody[0].appendChild(resultBox);

麻烦的是，如果我重新单击该按钮以重新计算，则会创建另一个div并将其添加到正文中。我已经尝试过使用CSS更改类，但是它不起作用，并且让自己有些困惑。

我怎么能换成新的呢？

一些代码段

js

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

Answer 1

您可以尝试使用.removeChild(elem)

删除旧的div本身

element.parentNode.removeChild(element);

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

Answer 2

您应该先删除旧的。您可以在创建像

这样的元素时简单地添加一个id

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

，并且在追加新元素时，只需先删除该元素即可。然后添加新的。

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

然后做你的事情...

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

2 个答案: