All geek questions in one place

Difference between caller and function in javascript

I write in two files: one is html and one is JavaScript. Therefore, to call the object, I do

document.getElementById("nameObj").onmouseover = changeMe;

and in the javascript file i do

 changeMe = function() { //and here i write the function }

but now I'm trying to optimize my code and call a function with objects in it. I created partitions (4 of them) and I am trying to change the color using onmouseover and onmouseout . Here is the html code:

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"> </script> <title> test 2</title> </head> <body> <header> </header> <div id="wrapper"> <main> <section class="mysection" id="section1"> </section> <section class="mysection" id="section2"> </section> <section class="mysection" id="section3"> </section> <section class="mysection" id="section4"> </section> </main> <div class="clear"> </div> </div> <footer> </footer> <script> (function(){ var sec = document.getElementsByClassName("mysection"); for(var i=0; i<3; i++) { sec[i].onmouseover=changeMe(sec[i], i); sec[i].onmouseout=changeBack(sec[i]); } })(); </script> </body> </html>

and here is JS:

 function changeMe(t_section, count) { if(count==0) { t_section.style.background="yellow"; } if(count==1) { t_section.style.background="blue"; } if(count==2) { t_section.style.background="green"; } if(count==3) { t_section.style.background="red"; } }; function changeBack(t_section) { t_section.style.background="gray"; };

But it does not work. What have I done wrong?

+5
source share
3 answers

Change the script tag to this code:

 (function(){ var sec = document.getElementsByClassName("mysection"); for(var i = 0; i < 4; i++) { sec[i].addEventListener('mouseover', function() { var index = i; return function() { changeMe(sec[index], index); }; }()); sec[i].addEventListener('mouseout', function() { var index = i; return function() { changeBack(sec[index]); }; }()); } })();

Check here for event listeners.
Please check this script for a complete working example.

+4
source

It:

 sec[i].onmouseover=changeMe(sec[i], i); sec[i].onmouseout=changeBack(sec[i]);

You assign the return value of the function to the onmouseover method, but it expects the body of the function. Since your functions do not return anything, it is equal to:

 changeMe(sec[i], i); sec[i].onmouseover=undefined; changeBack(sec[i]); sec[i].onmouseout=undefined;

Basically, you execute your function instantly and assign undefined onmouse callbacks.

To fix this, assign the function body to callbacks.

Optimization note, both of your functions themselves are the first parameter and are not needed, because you can always refer to an event element using this .

+2
source

The operator () (call operator) calls the function. This way you usually call handlers, rather than setting them. One of the options for adding handlers:

 // Create a basic array var sections = [].slice.call(document.querySelectorAll(".mysection")); // using an array for setting the background colors var colors = ['yellow', 'blue', 'green', 'red']; function hover(event) { var color = 'gray'; if ( event.type === 'mouseover' ) { // get the index of the mouseovered element // and use it for getting the corresponding color color = colors[ sections.indexOf(this) ]; } this.style.background = color; } sections.forEach(function(el) { el.addEventListener('mouseover', hover); el.addEventListener('mouseout', hover); });
+1
source

Source: https://habr.com/ru/post/1239207/

More articles:


All Articles