仅在第二次点击时更新添加的 javascript 元素

Question

我有一些 Javascript 代码从数组中获取值，该数组处理来自服务器的 http 响应并将按钮添加到模式窗口。所以按钮的 id 来自数组。 第二次点击一切都很好，我的按钮被添加到模式窗口中。但是当我下次调用该函数时，它会再次添加按钮，但它应该只更新按钮。 我该如何处理该功能只会在第二次和进一步点击时更新按钮？

buttonContainer = document.getElementById('modal1');                
        for (i = 0; i < resultContainers.length; i++) {
            newButton = document.createElement('input');
            newButton.type = 'button';
            newButton.value = resultContainers[i];
            newButton.id = resultContainerValues[i];
            newButton.class = 'buttonContainer';
                if (newButton.id == 'true') {
                    newButton.style.backgroundColor = '#8cff1a';
                };
            newButton.onclick = function () {
                alert('You pressed '+this.id);
            };
            buttonContainer.appendChild(newButton);

Answer 1

在这种情况下，您需要在添加按钮之前检查按钮是否已经存在。由于您知道要创建的按钮的 id，因此您可以查看是否已经存在具有该 id 的按钮并直接更新它。

var newButton = document.getElementById(resultContainerValues[i]);
if(newButton!=null) {
    newButton.value = resultContainers[i];
} else {
    newButton = document.createElement('input');
    newButton.type = 'button';
    newButton.value = resultContainers[i];
    newButton.id = resultContainerValues[i];
    newButton.class = 'buttonContainer';
    if (newButton.id == 'true') {
        newButton.style.backgroundColor = '#8cff1a';
    }
    newButton.onclick = function () {
        alert('You pressed '+this.id);
    };
    buttonContainer.appendChild(newButton);
}