JavaScript While loop in a onClick function not responding

Question

    <body>  
            
        <button onclick="yesClick()">Click me for a suprise word!</button>
            
            
        <script>
            
            function yesClick() {
                alert("Are you sure?")
                alert("Check again... but first click ok")

                
                let element = document.createElement("div");
                element.innerText = clickMe;
                let clickMe = "Gigachad"
                
                
                // Loop
                while (true) {
                    document.body.appendChild(element)
                }
                
            }
             
        </script>
    </body>

Click on the button, two alerts pop up saying "Are you sure?" and "Check again... but first click ok"). When clicked, the while loop should run infinitely since it's a while true loop, right? Well not for me... When clicked a new div should be added with a text inside stating "Gigachad" (don't judge it's just practice) but it doesn't work.

I reviewed the code, had my group partner check it out but didn't work

This is a good opportunity for you to start familiarizing yourself with [using a debugger](https://stackoverflow.com/q/25385173/328193). When you step through the code in a debugger, which operation first produces an unexpected result? What were the values used in that operation? What was the result? What result was expected? Why? To learn more about this community and how we can help you, please start with the [tour] and read [ask] and its linked resources. — David, Jan 26 '23 at 17:50
Specifically in this case... Have you confirmed that the code produces no error when it executes? (If you're not familiar with your browser's developer/debugging tools to observe such an error, now is the time to look into that.) How *specifically* have you confirmed that the loop *isn't* running? After all, I'd expect that the UI never updates because, well, you're occupying the thread with an infinite loop. — David, Jan 26 '23 at 17:52
I'm no expert with DOMs, but I think that this code is just infinitely relocating the element. You would need to create a new element to append, because this code is just relocating the element defined with `element`. — Seabyte, Jan 26 '23 at 21:31

Scott Marcus · Accepted Answer · 2023-01-26T19:36:00.397

Your while loop will run forever because true will always be true and there's nothing in the loop that will change that. In fact, the loop is not even necessary and is probably causing the browser to lock up.

Also, your let statements must precede your use of the let variables.

<button onclick="yesClick()">Click me for a suprise word!</button>
            
<script>     
  function yesClick() {
    alert("Are you sure?")
    alert("Check again... but first click ok")

    let element = document.createElement("div");
    let clickMe = "Gigachad"
    element.innerText = clickMe;
    document.body.appendChild(element)              
  }    
</script>

Now, you also really shouldn't be using inline event attributes to set up event handlers as that is a 25+ year old legacy way to work with events. And, instead of an alert when you are asking a question, use a confirm.

<button type="button">Click me for a suprise word!</button>
            
<script>  
  document.querySelector("button").addEventListener("click", function() {
    if(confirm("Are you sure?")) {
      alert("Check again... but first click ok")

      let element = document.createElement("div");
      element.textContent = "Gigachad";
      document.body.appendChild(element);
    }
  });    
</script>

JavaScript While loop in a onClick function not responding

1 Answers1