Question

I have javascript code like below –

function initPage(){

    // Left Navigation Pane - moverOver effect:
    document.getElementById("imgHowToBuy").onmouseover = leftNavHoverIn;
    document.getElementById("imgNewAddition").onmouseover = leftNavHoverIn; 
    document.getElementById("imgMostPopular").onmouseover = leftNavHoverIn;
    document.getElementById("imgOffer").onmouseover = leftNavHoverIn;   
    document.getElementById("imgRecentlySold").onmouseover = leftNavHoverIn;
.....
}

Basically my code works (the function gets called and executes beautifully). But I dont think I am using the principles of best practice here. It looks a little wierd to keep calling the same function; can i somehow pass the id of the element as the argument, and then execute the function, so that this whole thing reduces to a single line of code?

I’m a self taught js guy 😀

Thanks!

Answer 1

You’re not “calling the same function”, you’re simply assigning a single function to lots of elements on a page. I see nothing specifically wrong here.

You could store the id’s of all the elements you want to assign this function to, which would reduce the number of lines of code, but there’s no specific reason to do so.

var leftNavElements = ["imgHowToBuy","imgNewAddition"]; // etc....
for(var i=0;i<leftNavElements.length;i++){
    document.getElementById(leftNavElements[i]).onmouseover = leftNavHoverIn;
}