CODEWITHSUNDEEP
javascript
Matthieu
Matthieu

Reputation: 23

Mouseover Javascript

I have this HTML : 

<div class="firstScene">
    <div class="text"> <div class="welcomeMessage">iPhone X</div> </div>
    <div class="pictures">
        <img src="assets/img/iphoneX_off.png" alt="iphone X" id="iphoneX">
        <img src="assets/img/iphoneX_screen.png" alt="screen on" id="iphoneScreen">
    </div>
</div>

and this javascript : 

function initHover () {
  var screen = document.getElementsById("iphoneScreen")

  screen.onmouseover = mouseOver
  screen.onmouseout = mouseOut
}


function mouseOver() {
  var welcomeMessage = document.getElementsByClassName("welcomeMessage")
  welcomeMessage.className += "screenOn"
}

I want to add the class "screenOn" on the div with the class "welcomeMessage" but it doesn't work. May someone help me ?

PS : I don't have the right to use jQuery...

Upvotes: 2

Views: 118

Answers (1)

Krusader
Krusader

Reputation: 116

I've fixed your js code so try to use it know, should work

JS:

function initHover () {
  var screen = document.getElementById("iphoneScreen");

   screen.onmouseover = mouseOver
   screen.onmouseout = mouseOut
}


function mouseOver() {
   var welcomeMessage = document.querySelector(".welcomeMessage");
   welcomeMessage.className += " screenOn";
}

Note in mouseOver function I've changed getElementsByClassName, that you used, to the querySelector that way you get single object instead of the live HTMLCollection that returned from the getElementsByClassName

Upvotes: 1

Related Questions