Mouseover/Mouseout Not Working

JavaScript
1

Hi folks,

I’m trying to create the following outcome:

  • when I hover over and click on any of my buttons entitled, “Online”, "Offline, and “All” I want my information display screen to change to black, and when I mouseout off them it will change back to its original blue

As of right now, this is my code:

var tVStuff = document.querySelector("user-status"); tVStuff.addEventListener("mouseover", function(){ $(".displayOutPutHere").addClass("on"); }); tVStuff.addEventListener("mouseout", function(){ $(".displayOutPutHere").removeClass("on"); });

For some reason, this is just not working! The entire information screen stays black even before mouseover! I’d really appreciate your help! Thanks in advance! Cheers!

Here’s a link to my Code Pen:

2 
var tVStuff = document.querySelector("user-status");

You’re targeting a class: ".user-status"

3

@Layer, no I changed that to the correct buton class which is “online-status”, and it is still doing the same thing.

Code here:

var tvStuff = document.querySelector("online-status"); tvStuff.addEventListener("mouseover", function(){ $(".displayOutPutHere").addClass("on"); }); tvStuff.addEventListener("mouseout", function(){ $(".displayOutPutHere").removeClass("on"); });
See here: https://codepen.io/IDCoder/pen/mXMqGV?editors=0010 …thanks in advance for your help!

4

Yes, therefore the code has to be (".online-status") (point for a class).

To find this error on your own:
Go into Chrome Dev Tools (F12):

Uncaught TypeError: Cannot read property 'addEventListener' of null at VM82 pen.js:115

1 Like
5

OMG!!! It was that simple…thankyou savior!!! Why couldn’t the stupid inspector tool show that!
It was showing me this, (see screen-shot) at link but I couldn’t figure it out! https://s15.postimg.cc/i28hj9oa3/Twitch_TV_issues.jpg. So much hours wasted lastnight! Thankyou! Thankyou! Thankyou!

6

@miku86, all the mouseovers and mouseouts ae working now. However, when the page is refreshed the display screens are black by default, when they should be blue by default first. Can you tell me why this is? Thanks for your help in advance!

`
//…change video screen to tv state…
//for “Online” button
var tvStuff = document.querySelector(".online-status");
tvStuff.addEventListener(“mouseover”, function(){
$(".displayOutPutHere").addClass(“on”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".displayOutPutHere").removeClass(“on”);
});
tvStuff.addEventListener(“mouseover”, function(){
$(".TV-screen").addClass(“on2”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".TV-screen").removeClass(“on2”);
});

//for “Offline” button
var tvStuff = document.querySelector(".offline-status");
tvStuff.addEventListener(“mouseover”, function(){
$(".displayOutPutHere").addClass(“on”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".displayOutPutHere").removeClass(“on”);
});
tvStuff.addEventListener(“mouseover”, function(){
$(".TV-screen").addClass(“on2”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".TV-screen").removeClass(“on2”);
});

//for “All” button
var tvStuff = document.querySelector(".online-and-offline");
tvStuff.addEventListener(“mouseover”, function(){
$(".displayOutPutHere").addClass(“on”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".displayOutPutHere").removeClass(“on”);
});
tvStuff.addEventListener(“mouseover”, function(){
$(".TV-screen").addClass(“on2”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".TV-screen").removeClass(“on2”);
});

// for “searchbox field”
var tvStuff = document.querySelector(".searchbox");
tvStuff.addEventListener(“mouseover”, function(){
$(".displayOutPutHere").addClass(“on”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".displayOutPutHere").removeClass(“on”);
});
tvStuff.addEventListener(“mouseover”, function(){
$(".TV-screen").addClass(“on2”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".TV-screen").removeClass(“on2”);
});
`

See Code Pen link here: https://codepen.io/IDCoder/pen/mXMqGV?editors=0010