用Javascript添加HTML元素，看不到元素？

我还是新的JavaScript，所以我们期待看到很多不好的编程习惯......用Javascript添加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]); 
 
    }

所以基本上我在Add按钮（）添加一个HTML按钮，它调用setButton（）并将新元素传递给该函数。在setButton（）中，它首先将元素的颜色设置为浅绿色或淡红色，表示服务器尚未更新按钮的状态。这部分工作正常，按钮的颜色会改变。但是，在服务器请求的回调函数中，按钮拒绝按照之前使用的方法改变颜色。我已经找到了解决方法（通过使用setTimeout（）的时间为0毫秒，或通过使用传递的元素再次从文档中获取元素），但我想知道为什么会发生这种情况。这似乎只是回调函数中的一个问题。我已验证回调函数执行并且执行用于更改颜色的代码。作为一个方面说明，如果我有多个按钮，最后一个按钮可以正常工作，并且所有那些按钮不起作用，它们的颜色仍然是浅绿色或浅红色。 Notice buttons 0-5 are all a light color, yet button6 is solid, WHY?!?

来源

2017-01-19 James L

HTML文档上的不同元素应该具有不同的唯一ID。你的所有按钮都有相同的ID，所以只有最后一个按钮正在工作。

通过使用'button' + i来使您的ID独一无二，就像您使用的名称一样。

来源

2017-01-19 11:43:55 avck

这不就是我在这里做的吗？ \ –

好吧，我没有得到当前的错误，为什么你的代码不工作。也许我们需要看到整个代码？

但你肯定是在搜索关键字“事件循环”。当您的代码在超时运行时运行时，您的代码需要运行异步。在这里可以看到更多的细节：https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

如果你发布整个代码，我会再看看，但也许这已经有所帮助。如果这是你编程的第一步，那么你做得很好！

来源

2017-01-19 11:48:49 derbronko

http://pastebin.com/2t96Rw6h 这也可能有所帮助，但是在记录回调函数的开始和结束之后，我得到： Before：button0 rgb（112,192,112） After：button0 green ...这个模式一直重复通过button6 ，所以我知道它正在改变颜色，但HTML不会更新button0-5？ –

对不起，我想我们也需要html代码。 :-) – derbronko

客户端的HTML http://pastebin.com/FNdnMNE9 –

用Javascript添加HTML元素，看不到元素？

回答

相关问题