Question

尝试将 onclick 放在由另一个按钮添加到 DOM 的按钮上，但出现错误 Uncaught TypeError，这是关于设置“onclick”

2022-06-15

573

javascript html

这是我的 HTML 代码，很简单，只有一个带按钮的 div 块。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Problem</title>
    <style>

    </style>
</head>
<body>

    <div class="users">
        <button value ="0" id="button1">CLICK ME</button>
    </div>

    <script src="./script.js"></script>

</body>
</html>

这是我的 JavaScript 代码：

document.getElementById("button1").onclick = function () {
    let el = document.querySelector(".users");
    el.innerHTML += `<button id="button2">LEGIT BUTTON</button>`;
}

document.getElementById("button2").onclick = function(){
    console.log("button2 is working!!!");
}

所以在 HTML 代码中，如您所见，我在 div 块中有一个按钮。在 JavaScript 中，我将 onclick 放在该按钮上，单击该按钮后，新按钮会添加到 DOM 中。但我收到错误“未捕获 TypeError：无法设置 null 的属性（设置“onclick”） at”我希望第二个 onclick 等待第一个 onclick 发生以添加新按钮。我该怎么办？

Answer 1

将此新的 button2 添加到 DOM 后，您应该调用 document.getElementById("button2").onclick

h37l3x

2022-06-15

Answer 2

根据该代码，您尝试在将 button2 添加到 dom 之前为其添加事件侦听器。请先尝试像这样移动它以确保它存在：

document.getElementById("button1").onclick = function () {
  let el = document.querySelector(".users");
  el.innerHTML += `<button id="button2">LEGIT BUTTON</button>`;
  // it will now exist and you can add a listener
  document.getElementById("button2").onclick = function(){
     console.log("button2 is working!!!");
  }
}

Answer 3

实际上创建 dom 元素并在创建之后直接向其添加监听器会更清楚：

document.getElementById("button1").addEventListener("click", function () {

    let el = document.querySelector(".users");
    
    // Create the element using the API
    let btn = document.createElement("button");

    // Add element details (you don't need the ID anymore
    // because we'll use the javascript DOM element directly)
    btn.setAttribute("id", "button2");
    btn.innerText = "LEGIT BUTTON";

    // Add event listener
    btn.addEventListener("click", function(){
        console.log("button2 is working!!!");
    });

    // Append the new button to the element
    el.appendChild(btn);
});