3
3つのボタンがあるページがあります。ページにはデフォルトの背景としてgifがあります。 Button 1は、背景を黒くする必要があります。 Button 2は、バックグラウンドをgifに戻す必要があります。 button 3にカーソルを合わせると、背景がredとに点滅します。背景の上書き/変更に関する問題
ロード後、私は背景をblackにすることができますが、gifに戻ることはできません。 Button 3は、gifまたはblackの背景に関係なく動作しますが、使用後に背景をbutton 1を使用してに変更することはできません。 （そしてbutton 2はまだ動作しません） これらの3つのボタンを使って自分の仕事をし、背景を変えるにはどうしたらいいですか？
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's 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>