JavascriptでHTML要素を追加すると、要素が表示されませんか？

Question

私は...私はaddButton（）でHTMLボタンを追加しますので、基本的に

function addButton(name, state) { 
 
    numButtons += 1; 
 
    if (name === '') { 
 
     var i = 0; 
 
     while(buttonStates.hasOwnProperty("button" + i) === true) i++; 
 
     name = "button" + i; 
 
    } 
 
    document.getElementById("buttonTable").innerHTML += 
 
     "<tr>\ 
 
      <td>\ 
 
       <p id=\"buttonName" + numButtons + "\" class=\"buttonName\">" + name + "</p>\ 
 
      </td><td>\ 
 
       <button id=\"" + name + "\" onclick=\"setButton(this, 'toggle')\" class=\"button\">OFF</button>\ 
 
      </td>\ 
 
     </tr>"; 
 
//===IMPORTANT AREA 1==========================================================// 
 
    //setTimeout(function(){setButton(document.getElementById(name), state)}, 0); //works 
 
    setButton(document.getElementById(name), state); //doesn't work, no change 
 
//=============================================================================// 
 
} 
 

 
    function setButton(elem, state) { 
 
     //this is where the button's colors are set to light colors 
 
     //notice how I am using elem.style.backgroundColor 
 
     if(String(state) === 'toggle') state = !buttonStates[elem.id]; 
 
     if (String(state) === 'true') { 
 
      buttonStates[elem.id] = true; 
 
      elem.style.backgroundColor = "rgb(112,192,112)"; 
 
      elem.textContent = 'ON'; 
 
     } else { 
 
      buttonStates[elem.id] = false; 
 
      elem.style.backgroundColor = "rgb(255,128,128)"; 
 
      elem.textContent = 'OFF'; 
 
     } 
 
     
 
     var xhttp = new XMLHttpRequest(); 
 
     xhttp.onreadystatechange = function() { 
 
      if (this.readyState === 4 && this.status === 200) { 
 
       document.getElementById("demo").innerHTML = this.responseText; 
 
    //===IMPORTANT AREA 2==========================================================// 
 
       if (buttonStates[elem.id] === true) { 
 
        elem.style.backgroundColor = 'green'; //doesn't work, no change. Notice how I am, again, using elem.style.backgroundColor 
 
        //document.getElementById(elem.id).style.backgroundColor = 'green'; //works 
 
       } else { 
 
        elem.style.backgroundColor = 'red'; 
 
       } 
 
    //=============================================================================// 
 
      } else { 
 
       document.getElementById("demo").innerHTML = "readyState: " + this.readyState + "<br>status: " + this.status; 
 
      } 
 
     }; 
 
     xhttp.open("POST", "/buttonToggle", true); 
 
     xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
 
     xhttp.send(elem.id + "=" + buttonStates[elem.id]); 
 
    }

まだJavaScriptに新たなんだ、そんなに悪いプログラミング手法の多くを見ることを期待し、どの呼び出しsetButton（）を呼び出し、新しい要素をその関数に渡します。 setButton（）では、最初に要素の色を明るい緑色または薄い赤色に設定します。これは、サーバーがまだボタンの状態を更新していないことを示します。この部分は正常に動作し、ボタンの色は変わります。ただし、サーバー要求のコールバック関数では、ボタンは前と同じ方法で色の変更を拒否します。私はそれを回避する方法を見つけました（setTimeout（）を0msの時間で使用するか、または渡された要素を使ってドキュメントから再度要素を取得します）が、これがなぜ発生するのかを知りたいと思います。それはコールバック関数の問題にしか見えないようです。コールバック関数が実行され、色を変更するためのコードが実行されていることを確認しました。サイドノートとして

、私は複数のボタンがある場合は、最後のボタンが正常に動作し、それが動作しないすべてのものを前に、彼らの色はまだ緑色光または光の赤です。 Notice buttons 0-5 are all a light color, yet button6 is solid, WHY?!?

Answer 1

HTML文書のさまざまな要素には、異なる一意IDが必要です。あなたのすべてのボタンは同じIDなので、最後のボタンだけが動きます。

名前を使用しているように、'button' + iを使用して独自のIDを作成します。

Answer 2

さて、私は現在のエラーを取得ドント、なぜあなたのコードは、仕事をdoesn't。多分、コード全体を見る必要があるでしょうか？

しかし、あなたは間違いなく、キーワード「イベントループ」を探しています。 タイムアウト時にコードを実行しているときは、コードを非同期で実行する必要があります。 詳細を参照してください：https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

コード全体を投稿すると、もう一度見ていきますが、これはすでに役立ちます。 これがプログラミングの最初のステップであれば、それは素晴らしいことです！