2回目のクリックで追加されたjavascript要素のみを更新します

Question

サーバからのHTTPレスポンスを処理し、モーダルウィンドウにボタンを追加する配列から値を取得するJavaScriptコードがあります。したがって、ボタンのIDは配列から取得されます。 2回目のクリックですべてが問題なく、私のボタンがモーダルウィンドウに追加されます。しかし、次回にボタンを追加するときに関数を呼び出すと、ボタンが更新されるだけです。 この関数は、2回目以降のクリックでのみボタンを更新することはできますか？

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