I'm new to JavaScript. My goal here is fade in and out the box. Please review my code and let me know what am doing wrong here? When a user clicks Fade, the box should change opacity? I tried to define function fade button and call the function and execute the toggle fade in and out, but it appears to be not working.
<!DOCTYPE html>
<html>
<head>
<title>Watch That Box</title>
</head>
<style>
.fade-in {
opacity: 1;
}
</style>
<body>
<p>Press the buttons to change the box!</p>
<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px;"></div>
<button onclick="growbutton()"> Grow </button>
<button onclick="fadebutton()"> Fade </button>
<button onclick="resetbutton()"> Reset </button>
<button onclick="bluebutton()"> Blue </button>
<script>
const box = document.getElementById("box");
function fadebutton() {
box.classList.toggle("fade-in");
}
</script>
<script src="javascript.js"></script>
</body>
</html>The opacity style defaults to 1 so adding and removing the class is unnoticeable. Therefore I updated the opacity style to 0.5.
const box = document.getElementById("box");
const fade = document.getElementById("fade");
/* Click event listener for <button> with id value of "fade" */
fade.addEventListener("click", function() {
box.classList.toggle("fade-in");
});.fade-in {
/* The style below has been updated. */
opacity: 0.5;
}
#box {
height:150px;
width:150px;
background-color:orange;
margin:25px;
}<body>
<p>Press the buttons to change the box!</p>
<div id="box"></div>
<button id="fade">Fade</button>
</body>The code snippet below demonstrates the implementation of the above solution within an HTML file.
<!DOCTYPE html>
<html>
<head>
<title>Watch That Box</title>
</head>
<style>
.fade-in {
opacity: 0.5; /* The style below has been updated. */
}
#box {
height:150px;
width:150px;
background-color:orange;
margin:25px;
}
</style>
<body>
<p>Press the buttons to change the box!</p>
<div id="box"></div>
<button id="fade">Fade</button>
<script>
const box = document.getElementById("box");
const fade = document.getElementById("fade");
/* Click event listener for <button> with id value of "fade" */
fade.addEventListener("click", function() {
box.classList.toggle("fade-in");
});
</script>
</body>
</html>