Hi folks,
I’m trying to create the following outcome:
When I hover over and/or 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 the buttons, the screen will change back to its original blue. I got this to work.
Now the only thing is that, once the page is refreshed/relaunched, the display screen is black by default, when it should be the original blue instead. It is only supposed to change to black for the mouseover/mouseout function. I don’t know what is causing this! Do you know why this is? I’d really appreciate your help! Thanks in advance! Cheers! Code Pen link here: https://codepen.io/IDCoder/pen/mXMqGV
`
//…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
