时间戳

首页 > 解决方案 > 在javascript中重新单击按钮时如何更新元素

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

问题描述

我只是想在小型应用程序中重新单击按钮时更新 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%;
}

标签： javascriptdombuttonelement

解决方案

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

element.parentNode.removeChild(element);

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

推荐阅读