0

This is my HTML code, it's simple just one div block with button.

<!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>

and here is my JavaScript code:

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

so in HTML code as you see I have one button in div block. in JavaScript I put onclick on that button and after you click that button new button is added in DOM. but I am getting Error "Uncaught TypeError: Cannot set properties of null (setting 'onclick') at" I want the second onclick to wait for the first onclick to happen to add new button. what should I do?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
BayernStrike
  • 1
  • 1
    You're creating duplicate IDs. IDs need to be unique. – Barmar Jun 15 '22 at 21:04
  • You need to add the second `onclick` inside the first `onclick`. Otherwise you're trying to add it to a button that doesn't exist yet. – Barmar Jun 15 '22 at 21:05
  • Use modern coding practices like `addEventListener`...? – Heretic Monkey Jun 15 '22 at 21:07
  • Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Heretic Monkey Jun 15 '22 at 21:13
  • Do you really want to keep adding another button every time you click the first button? – Barmar Jun 15 '22 at 21:24

5 Answers5

0

you should call document.getElementById("button2").onclick after you add this new button2 to the DOM

h37l3x
  • 84
  • 2
0

Based on that code, you are trying to add an event listener to button2 before it has been added to the dom. Try moving it like this to ensure it exists first:

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!!!");
  }
}
mcgraphix
  • 2,723
  • 1
  • 11
  • 15
  • This will only work for the first button added, because of the duplicate ID. – Barmar Jun 15 '22 at 21:16
  • I'm guessing this is just an exercise and not intended to be a real app. There isn't enough context to really know what the requirement is. But the stated problem would be solved by this solution. – mcgraphix Jun 15 '22 at 21:19
0

It would be clearer to actually create the dom element and add the listener to it directly after creating it:

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);
});
Drago96
  • 1,265
  • 10
  • 19
0

You try to listen even on element, before his created.

Try to create button with document.createElement

const btn2 = document.createElement("button");
btn2.innerText = "LEGIT BUTTON";
btn2.onclick = () => {console.log("button2 is working!!!");};
document.body.appendChild(btn2);
Ant1p0w
  • 11
  • 1
0

When you create an event listener, it only works for elements in the DOM that already exist, so the event listener you have will not work. What you must do is create the event listener AFTER the button is made. You can do this with:

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

This way, you are not setting the event listener until the second button is created. Hope this helps!

Gerald Negvesky
  • 72
  • 8