Как обновить элемент при повторном нажатии кнопки в JavaScript - PullRequest
Новая
       42

Как обновить элемент при повторном нажатии кнопки в JavaScript

0 голосов
/ 05 марта 2019

Я просто хочу обновить содержимое элемента div p при повторном нажатии кнопки в небольшом приложении. Я делаю множество сценариев DOM и в значительной степени создаю весь HTML в JS. Имеется список выбора переключателей, и на основе отмеченных кнопок создается элемент div, содержащий результат, который отображается в конце тела страницы. 

mainBody[0].appendChild(resultBox);

Проблема в том, что если я повторно нажму на кнопку, чтобы пересчитать, тогда будет сделан еще один div и добавлен в тело. Я пытался изменить классы с помощью CSS, но он не работает, и я немного запутался.

Как я могу просто заменить его на новый?

Некоторые фрагменты кода

1010 * 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%;
}

Ответы [ 2 ]

0 голосов
/ 05 марта 2019

Сначала вы должны удалить старую. Вы можете просто добавить идентификатор при создании элемента, например 

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

и при добавлении нового элемента просто сначала удалите этот элемент. затем добавьте новый. 

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

тогда делай свое дело ...

0 голосов
/ 05 марта 2019

Вы можете попробовать удалить сам старый div с помощью .removeChild(elem)

element.parentNode.removeChild(element);

прямо перед добавлением нового или, альтернативно, обновить содержимое div вместо генерацииэто каждый раз.

...