javascript - 在js中声明的单击按钮不起作用

Question

我试图在单击 button 后创建一个新的 p 标记，但单击后没有任何反应:

(function() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 403) {
      var heading = document.getElementById("head");
      var para = document.createElement("P");
      para.innerHTML = "Accept the T&Cs to Continue";
      var button = document.createElement("BUTTON"); // button created here
      button.classList.add("theButton");
      var theButton = document.getElementsByClassName("theButton");
      theButton.onclick = function() { // button doesn't work onclick
        var newP = document.createElement("P");
        newP.innerHTML = "DONE";
        heading.appendChild(newP);
        heading.appendChild(para);
        heading.appendChild(button);
      };
    }
  };
  xhttp.open("GET", "/content.ajax", true);
  xhttp.send();
})();

有人可以帮我解决这个问题吗？

Answer 1

我假设 document.getElementsByClassName("theButton") 应该获取您的按钮，因为它使用相同的类。

1. 这是不必要的，因为您已经有了对按钮的引用。
2. 您的按钮(和 para)未附加到 DOM，因此 getElementsByClassName 将返回空结果。
3. document.getElementsByClassName() 返回一个 HTMLCollection(列表)，而不是单个元素。您无法将监听器函数添加到 HTMLCollection。
4. 该按钮仅在单击时才会添加到 DOM。但只有在它添加到 DOM 后才能单击它。

此外，您还应该考虑使用 addEventListener，因为您的监听器不能以这种方式被覆盖，并且您可以添加多个监听器。

(function () {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if(this.readyState ==4 && this.status == 403){
            var heading = document.getElementById("head");
            var para = document.createElement("P");
            para.innerHTML = "Accept the T&Cs to Continue";

            var button = document.createElement("BUTTON"); // button created here
            button.classList.add("theButton");
            button.addEventListener("click", function() {
                var newP = document.createElement("P");
                newP.innerHTML = "DONE";
                heading.appendChild(newP);
            });

            heading.appendChild(para);
            heading.appendChild(button);
        }
    };
    xhttp.open("GET","/content.ajax",true);
    xhttp.send();
})();