1

Here is my javascript loop

 for (var i=1; i <= 100; i++)
{
    if (i % 15 == 0)
        console.log("DuckGoose");
    else if (i % 3 == 0)
        console.log("Duck");
    else if (i % 5 == 0)
        console.log("Goose");
    else
        console.log(i);
}

Im just recently getting into learning html , and java script in my attempts to become a full stack developer by the end of the summer.. Here im trying to use an html button to start/stop this loop and use the function listed below the number 3. Below is what I have so far on the HTML side. Im really hung up and stuck on how to start/stop this loop using this button. Can someone teach me the best way to do this in a beginner way? Still learning. Thanks

<body>
  <div>
    <button>Click me</button>

  </div>

</body>

3

function write (o) {
    var el = document.createElement('pre');
    el.innerHTML = JSON.stringify(o, undefined, 2);
    document.body.appendChild(el);
}
Joshua Paulsen
  • 47
  • 1
  • 9
  • If you wish to learn Javascript on your own, you could go through MDN's Javascript tutorial here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript – Nisarg Shah May 02 '18 at 03:00
  • @Nisarg I appreciate the link! But I am applying for a bootcamp type class and have looked through a few links. this seems a little complex to me. – Joshua Paulsen May 02 '18 at 12:57

1 Answers1

1

So there is something to be aware of with a for loop, you usually don't stop them with a button click. Once a for loop has started, it will continue to run until 1 of 2 things happen, either the loop's condition evaluates to false, or specifically in code it's told to do something different (either a break or continue statement). So you could have the button click kick off the starting of the loop, but that loop will continue to run until it's done. Using jQuery, it would look something like this.

$(document).on('click', '#duckDuckGoose', function() {
  RunDuckDuckGoose();
});

function RunDuckDuckGoose() {
  for (var i=1; i <= 100; i++)
  {
    if (i % 15 === 0)
        console.log("DuckGoose");
    else if (i % 3 === 0)
        console.log("Duck");
    else if (i % 5 === 0)
        console.log("Goose");
    else
        console.log(i);
  }
}

Now if you REALLY need a button to stop the execution, there are a couple things to keep in mind.

  1. The for loop will go through all 100 elements VERY quickly. So you may want to put something in there to slow down the loops, (or increase the amount of loops) that way you can actually see the stop button work.
  2. In order for the for loop to stop on the button click, the click handler will have to trigger some variable (declared outside of the for loop) that the for loop can look at.

Unfortunately, looping the way I showed you blocks the UI so you can't stop the loop anyway with a button click, so you'd have to look into looping async, see this article for ways to do that.

I hope this helps or at least points you in the right direction. Best of luck on your new journey!

Sgt_zippy
  • 66
  • 5