Im trying to handle a mouse over event with Javascript and having some issues

Question

I want the background of my body div to change to a different image as each link is hovered over. Here is my code with the link section removed beside the first one as an example:

JAVASCRIPT:

var i = 0,
    anchors = document.querySelectorAll("zoom"),
    background = document.getElementById("body");

function backgroundChange() {
    "use strict";

    window.console.log("hey");

    if (event.target.id === "4Mo3We2Days") {
        background.style.background = "url('../Images/movies/4Mo3We2Days.png')";
    ...
    other specific ids
    ...
    }
}

function backgroundRemove() {
    "use strict";

    background.style.backgroundImage = "none";
}

for (i = 0; i < anchors.length; i += 1) {
    anchors[i].addEventListener("mouseover", backgroundChange, false);
    anchors[i].addEventListener("mouseout", backgroundRemove, false);
    window.console.log("yo");
}

HTML:



    
        
        Archives
        
    
    

        
            
            
                Store
                Archives
                About
                Blog
                Home
            


        

        

        
            ** Please Note that these were written for the radio and were meant to be read aloud. There are many typos as
            well as odd things to read. If you would like, leave a comment so I can fix it! 

              - Jake Winters
        

        

        
            
                4 Months 3 Weeks and 2 Days
                A Most Violent year
                A Pidgeon Sat
                       on a Branch Reflecting on Existence
                Akira
                Amadeus
                Borgman
                Brief Interviews with Hideous Men
                Bronson
                Catch Me Daddy
                Cop Car
                Gangs of New York
                Gattaca
                Hail Ceaser
                Hidden
                The Hudsucker Proxy
                In Bruges
                Koyaanisqatsi
                Leviathan
                Libre et Assoupi
                Moon
                Mustang
                Nice Guys
                Only God Forgives
                Pans Labyrinth
                Planes, Trains, and Automobiles
                Psycho
                Repoman
                Revenant
                Seven Psychopaths
                Seven
                Still Walking
                The Fifth Element
                The Illusionist
                The Past
                The Survivalist
                The Usual Suspects
                They Live
                This is not a Film
                Turbo Kid
                Weird Science
                What We do in the Shadows
                Waltz With Bashir
                World According to Garp
                World's Greatest Dad

CSS:

#body {
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
}

am I adding the listeners right? How do I know from within the functions I have defined what the element that made the event happen is? is event.target.id right?

I have tried a few methods but have found many ways of doing so. I don't want to use jQuery as I am trying to learn base javascript. If you feel like this is really better suited to jQuery please let me know why. Any help is very appreciated. Thanks!

Another side question that I only want an answer to if you know of the top of your head: I want to style the background images I use to all have a white rounded vignette so the belend into the background. I also want the alpha of all of the images changed. Once again this isn't my main question and can be ignored

Scott Marcus · Accepted Answer

The biggest issue was your querySelectorAll("zoom"), which needs to be querySelectorAll(".zoom") since you are looking for classes. As such, you were never successfully getting access to any of the links you wanted to hook up to event handlers.

You also had some invalid HTML ( elements don't get a closing tag).

The event object is automatically passed to event handling functions as the first argument, so that is the standard way to access it. Just accessing event (as a global) is specific to IE and would also prevent you from accessing the event.target in some browsers. As I stated in the comments, this is another way to reference the DOM object that invoked the event, so this.id would get you the same object reference as event.target.id.

Lastly, I recommend you change some of your identifier names (body shouldn't really be an id for anything but the element).

I added instructions to change the color of the section in question when the mouse moves in and out of it just for demonstration here.

See the inline comments below:

var i = 0,
// You are looking for classes, so your selector needs to start with a "."
anchors = document.querySelectorAll(".zoom"),
body = document.getElementById("main");

// Every event callback function will automatically 
// be passed a reference to the event it is responding
// to. Access that event by setting up a callback
// argument (evt here). Accessing the event via "event" 
// is specific to older versions of Internet Explorer.
function backgroundChange(evt) {
  "use strict";

    console.log("hey");

    // evt.target references the same thing as "this" in this case
    if (this.id === "4Mo3We2Days") {
        body.style.background = "url('../Images/movies/4Mo3We2Days.png')";
        
        // This is just for testing
        body.style.backgroundColor = "yellow";
        //other specific ids
    }
}

function backgroundRemove() {
    "use strict";
    body.style.backgroundImage = "none";
    
    // Just for testing
    body.style.backgroundColor = "initial";
}

for (i = 0; i < anchors.length; i += 1) {
    // .addEventListener uses false as the default for the third argument, so you don't have to add it
    anchors[i].addEventListener("mouseover", backgroundChange);
    anchors[i].addEventListener("mouseout", backgroundRemove);
}

#main {
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
}


   
   
   
     Store
     Archives
     About
     Blog
     Home
   





 ** Please Note that these were written for the radio and were meant to be read aloud. 
    There are many typos as well as odd things to read. If you would like, 
    leave a comment so I can fix it! 

      - Jake Winters






  
    4 Months 3 Weeks and 2 Days
    A Most Violent year
    A Pidgeon Sat
                       on a Branch Reflecting on Existence
    Akira
    Amadeus
    Borgman
    Brief Interviews with Hideous Men
    Bronson
    Catch Me Daddy
    Cop Car
    Gangs of New York
    Gattaca
    Hail Ceaser
    Hidden
    The Hudsucker Proxy
    In Bruges
    Koyaanisqatsi
    Leviathan
    Libre et Assoupi
    Moon
    Mustang
    Nice Guys
    Only God Forgives
    Pans Labyrinth
    Planes, Trains, and Automobiles
    Psycho
    Repoman
    Revenant
    Seven Psychopaths
    Seven
    Still Walking
    The Fifth Element
    The Illusionist
    The Past
    The Survivalist
    The Usual Suspects
    They Live
    This is not a Film
    Turbo Kid
    Weird Science
    What We do in the Shadows
    Waltz With Bashir
    World According to Garp
    World's Greatest Dad

Im trying to handle a mouse over event with Javascript and having some issues

Answers (2)

Related Questions