Js events?

Question

So I have this code. I'm trying to add "Hello" to the div when you hover over it, but I'm having trouble understanding it the way Sololearn teaches it. Can anybody explain it and help me out? I don't want to use HTML attributes for the events. Purely Javascript.
https://code.sololearn.com/W1iFUvhRw90s/?ref=app

Answer 1

Thanks for Explanation Pao 📕📕📕
and
thanks for code Daniel Cooper💻💻💻

Answer 2

This is how it works 😊:

1) Line 1: The window's load event will fire as soon as the HTML document has finished loading, calling the 'Test' function first.

2) Line 2: The variable 'x' stores the div element to be used.

3) Lines 3-4: The div element is targeted via the variable 'x' and the addEventListener method sets up the function 'Hello' to be called whenever the 'mouseover' (hover over it) event happens, and the fuction 'NotHello' when the 'mouseout' event happens (stop hovering over it)  

4) Lines 6-8: The function 'Hello' will be called when you hover over the div element. It targets the div element and the property 'innerHTML' sets its HTML content to "Hello!"

5) Lines 10-12: The function 'NotHello' is called when you stop hovering over the div element. It targets the div element and changes its HTML content to blank.

Answer 3

Lol, I thought you copied the code and didn't understand how it works. All good then 👍

Answer 4

Lol. Thanks but I figured it out last night. The code wasn't like that when I first uploaded it, as there was no js. It must have changed when I saved it. Thanks for the help though.

Answer 5

Lol. I couldn't sleep last night so I explored the topic a bit more and eventually figured it out.

I'll come back here if I need more help though.