Start and Stop Button

Greetings, everyone! As I was working on my last code, I came across something very interesting. Take a look at this: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <button>Start</button> <script> let butn = document.querySelector("button"); let boolean = false; butn.addEventListener("click", ()=>{ if (boolean == false){ butn.innerHTML = "Stop"; boolean = true; } else{ butn.innerHTML = "Start"; boolean = false; } }); </script> </body> </html> Honestly, it would have taken me a long time to figure this out by myself, if at all. This code has a boolean as a variable and is somehow able to affect the button, creating a toggle function. What I don't understand is the connection between the boolean and the toggle function. Can someone explain to me, in detail, how is everything connected, logically? What is the connection between the boolean variable and the button? How, by adding an extra variable, is it logically possible to affect the function and result in a toggle? I can see that it works perfectly, but I don't understand why?

javascript button function

31st Aug 2019, 5:46 PM

Vasilis Karapas

4 Answers

+ 2

If you click the button the function will check weather the boolean is false or true. Depending on that it will change the text to "Start" or "Stop" and will also invert the booleans value, so next time the function gets called it will set the different text and so on. It's actually quite simple :)

31st Aug 2019, 6:09 PM

Aaron Eberhardt

+ 1

Well, I tried to answer this in my first post, but it doesn't seem to be clear enough, I guess. The code basically has two 'scenarios': if boolean is true, do scenario 1: -> change the name -> set boolean to false => next time the function is called the boolean is false, scenario 2 will be executed if boolean is false, do scenario 2: -> change the name -> set boolean to true => next time the function is called the boolean is true, scenario 1 will be executed That's all. The boolean has two values. True and false. On and off. And that's how the toggle works. So in short it looks like this: Is it on? -> set it to off! Is it off? -> set it to on! and again and again...

31st Aug 2019, 7:30 PM

Aaron Eberhardt

+ 1

I understood you the first time. It's my fault, I should have asked this question differently. Anyway, the code made sense, the moment you gave the on and off explanation. Thank you for your help! ^_^

31st Aug 2019, 7:47 PM

Vasilis Karapas

Yeah,but if you do this code without the randomly added Boolean variable, it will only change the text to stop, instead of acting as a toggle. I don't doubt the simplicity of the code, I just don't get how a randomly added extra variable, and a Boolean of all things, tied together the entire code. Could this have been done differently? How did someone even come to the conclusion to add that extra variable? That's what I'm curious about.

31st Aug 2019, 6:37 PM

Vasilis Karapas