Overwrite / change background problems
I have a page with 3 buttons. The default background is gif
.
Button 1
should make the background black.
Button 2
should change the background back to gif
. When you hover over the button 3
background, red
and blinks green
.
Once loaded, I can put the background in black
, but not return to gif
.
button 3
works regardless of background gif
or black
, but after using it I cannot change the background to black
using Button 1
. (and Button 2
still doesn't work) How can I get these 3 buttons to do their job and change the background?
var myHoverInterval = null;
function switchfunction() {
if (document.body.style.background === 'red') {
document.body.style.background = 'green';
} else {
document.body.style.background = 'red';
}
}
window.onload = function() {
// Get references to the DOM elements you'll work with
var bdy = document.body;
var btn = document.getElementById("changeBackgroundButton");
var btn2 = document.getElementById("changeBackgroundBackButton")
var btn3 = document.getElementById("trippyBackground")
// Set up the button to have a click event handler:
btn.addEventListener("click", function() {
/* Just remove the image and the page will revert to the previously set color */
bdy.style.backgroundImage = "url('')";
});
btn.style.color = "red";
btn2.addEventListener("click", function() {
/* Just remove the image and the page will revert to the previously set color */
bdy.style.backgroundImage = "url(https://media.giphy.com/media/ko7twHhomhk8E/giphy.gif) no-repeat center center fixed";
});
btn3.addEventListener("mouseover", function() {
if (myHoverInterval != null) {
return;
}
myHoverInterval = setInterval(function() {
switchfunction();
}, 500);
});
btn3.addEventListener("mouseout", function() {
if (myHoverInterval != null) {
clearInterval(myHoverInterval);
myHoverInterval = null;
}
});
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
background: url(https://media.giphy.com/media/ko7twHhomhk8E/giphy.gif) no-repeat center center fixed;
background-size: cover;
background-color: black;
}
</style>
</head>
<body>
<p>
<button id="changeBackgroundButton" style="color:white; font-size: 150%;background-color :lightblue">Click this button if the page is slow, it probably due to the background</button> <br>
<button id="changeBackgroundBackButton" style="color:white; font-size: 150%;background-color :lightblue">Try to load the background again</button> <br>
<button id="trippyBackground" style="color:white; font-size: 150%;background-color :lightblue">trolololol?</button>
</p>
</body>
</html>
source to share
There are several problems with the code.
-
background
in CSS is a generic property for all background properties. In your case, it is probably better not to use it and specify each property separately, eg.background-image
andbackground-color
. - At the end of your event,
mouseout
you must inform that the page will revert to its original background.
Here is an improved version of your code without any errors (hopefully).
var myHoverInterval = null;
function switchfunction() {
//You must remove the background image before changing bgcolor to red or green
//Use backgroundColor instead of background
document.body.style.backgroundImage = "url('')";
if (document.body.style.backgroundColor === 'red') {
document.body.style.backgroundColor = 'green';
} else {
document.body.style.backgroundColor = 'red';
}
}
window.onload = function() {
// Get references to the DOM elements you'll work with
var bdy = document.body;
var btn = document.getElementById("changeBackgroundButton");
var btn2 = document.getElementById("changeBackgroundBackButton");
var btn3 = document.getElementById("trippyBackground");
var img; // This variable will be used to remember the background before the hover events
// Set up the button to have a click event handler:
btn.addEventListener("click", function() {
/* Just remove the image and the page will revert to the previously set color */
bdy.style.backgroundImage = "url('')";
});
btn.style.color = "red";
btn2.addEventListener("click", function() {
/* Just remove the image and the page will revert to the previously set color */
// Use backgroundImage for the GIF
bdy.style.backgroundImage = "url(https://media.giphy.com/media/ko7twHhomhk8E/giphy.gif)";
});
btn3.addEventListener("mouseover", function() {
if (myHoverInterval != null) {
return;
}
// Store current bgImage in variable
img = bdy.style.backgroundImage;
// Call func straight away once before the interval so it takes effect straight away
switchfunction();
myHoverInterval = setInterval(function() {
switchfunction();
}, 500);
});
btn3.addEventListener("mouseout", function() {
if (myHoverInterval != null) {
clearInterval(myHoverInterval);
myHoverInterval = null;
// Set the background image and color back to what they were
bdy.style.backgroundColor = 'black';
bdy.style.backgroundImage = img;
}
});
}
body {
background-image: url(https://media.giphy.com/media/ko7twHhomhk8E/giphy.gif);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-opacity: 0.6;
background-color: black;
}
<body>
<p>
<button id="changeBackgroundButton" style="color:white; font-size: 150%;background-color :lightblue">Click this button if the page is slow, it probably due to the background</button>
<br>
<button id="changeBackgroundBackButton" style="color:white; font-size: 150%;background-color :lightblue">Try to load the background again</button>
<br>
<button id="trippyBackground" style="color:white; font-size: 150%;background-color :lightblue">trolololol?</button>
</p>
</body>
source to share
You are mixing multiple style attributes and not clearing the previous one. I suggest using only style.background
, this will ensure that the previous value is always cleared.
...
btn2.addEventListener("click", function() {
bdy.style.background = "url('https://media.giphy.com/media/ko7twHhomhk8E/giphy.gif') no-repeat center center fixed";
bdy.style.backgroundSize = "cover";
bdy.style.backgroundColor = "black";
});
...
See also my pen: https://codepen.io/anon/pen/NjvmYv
source to share