Cant seem to understand the concept of the events in Js... Any pdf for help?

Answer 1

Janning's answer is nice. And I'm just adding a personal experience here sharing my painful experience when I first touch this a few days ago:
As the most frequently used event is mouse click on a DOM element (not necessarily button, I usually use image or div textbox)
There are two ways.
The easy way is add onclick attribute to the button tag in HTML e.g. <img onclick="myfunc()" />
notice that here you need () .
The second of addEventListener in javascript is when you want to later removeEventListener and add another event listener. (for example my pokemon code)
The addEventListerner is used in this way
button1.addEventListener("click", myfunc);
here the first argument click without "on" and second argument myfunc without "()".
but what is button1? You need to getElement I always getElementById but there are other ways too. Now is what makes me painful:
var button1 = document.getElementById("nextButton");
console log output cannot add event listener to null object.
reason is javascript runs before html,...

Answer 2

Reference: https://www.w3schools.com/jsref/dom_obj_event.asp

I try to think of event listeners like those action movies when someone plants a "bug" (e.g. listening device, tiny web cam, etc.) on a target or on themselves and the support team hiding out in the room next door or in the nearby surveillance van has agreed to listen for a key phrase or watch for a specific non-verbal cue to send in backup. In this case, the server sends JavaScript code that plants a "bug" (surveillance device) on the user's web browser that waits for the user to do something specific, which in turn causes the JavaScript to respond in whatever way it was programmed to respond.

Not sure if this was what you were going for in your question.

Answer 3

Gordon Chan and Janning⭐
thanks guys... finally figured it out.

Answer 4

An event is an action taken by the user of the app, the hardware or other external factors. All GUI operating systems are EVENT DRIVEN...

What's important about events is how our code determine what needs to be done..

Answer 5

@ Gordon Chan
i rilly rilly appreciate pal ..thanks much

Answer 6

i mean cant seem to understand

Answer 7

thanks Janning⭐

Answer 8

Thanks again.. am starting to get it now

Answer 9

concept about adding event listeners so a button can execute a function upon clicking.

Answer 10

exceed word limit, continue,
... so there is no object to get. the nextButton has not create yet, so js gets null.
to solve, put getElement in window.onload, like this:
window.onload = function (){
//the interactions with DOM elements here
}

This stucked me for many days so I hope this sharing helps you😉

Answer 11

you one of a kind... Gordon Chan

Answer 12

Try to post an example because, personally, i didnt understand your problem

Answer 13

I will appreciate

Answer 14

What do you mean? Your code didnt receive events (like click, load etc)?

Answer 15

You're welcome Barak™ . 🙂

Answer 16

Barak™ Thanks for marking my answer best. I'll code up an example for you a few hours later.

Answer 17

Thanks, and for the effects there are great examples in Code Playground, such as this amazing one by Ryan Els:
https://code.sololearn.com/WKg6xlnbqR4E/?ref=app
Go check the codes and learn something from it😉

Answer 18

https://code.sololearn.com/WriFNOoR188j/?ref=app
For you,
press in this sequence
1 2 3 4 3 1
And read the HTML and the Javascript.