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

Question

I have some Javascript code that gets values from an array that processes a http response from a server and adds buttons to a modal window. So the ids for the buttons come from the array. On second click everything is fine and my buttons are added to the modal window. But when I call the function the next time it adds the buttons again, but it should only update the buttons. How can I handle it that the function will only update the buttons on second and further clicks?

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

You need to check if the button already exists before you add it in that case. Since you know the id of the button you're about to create, you can see if there's already a button with that id and just update it instead.

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