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);
}

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

1 个答案: