*** New Team Member Notice ***
I'm currently working on an assignment and trying to implement a simple fade effect on a box. While it seems like this should be straightforward, I'm encountering some obstacles. Currently, the button causes the box to simply disappear by setting the opacity to 0, but I would prefer a smoother fade out transition. I know that adjusting the opacity in small increments over time is necessary, but despite my efforts of searching online and experimenting with various approaches, I can't seem to get it right. Any guidance from someone patient would be highly appreciated. My goal is to have the .js file execute this function like the other buttons in my project. It would also be great if clicking the button twice could trigger a fade out followed by a fade back in. I'm interested in learning how one button can produce an effect and then reverse it. I've included two snippets below, one from my .html file and the other from my .js file.
Thank you.
function fadeInOutFunction(id){
document.getElementById("box").style.opacity = 0;
}
function blueFunction(id){
document.getElementById("box").style.backgroundColor = "blue";
document.getElementById("box").style.opacity = 1;
}
function pinkFunction(id){
document.getElementById("box").style.backgroundColor = "pink";
document.getElementById("box").style.opacity = 1;
}
// Add more color functions as needed
function resetFunction(id){
document.getElementById("box").style.opacity = 1;
document.getElementById("box").style.height = "250px";
document.getElementById("box").style.width = "250px" ;
document.getElementById("box").style.backgroundColor = "orange";
document.getElementById("box").style.margin = "25px";
}
<!DOCTYPE html>
<html>
<head>
<style>
#large22px {
font-size: 22px;
}
</style>
<title>JavaScript Funland</title>
</head>
<body>
<p id="large22px">Click the buttons to modify the box:</p>
<div id="box" style="height:250px; width:250px; background-color:orange; margin:25px"></div>
<button id="fadeInOutFunction" onclick="fadeInOutFunction()">Fade In/Out</button>
<button id="resetFunction" onclick="resetFunction()">Reset</button>
<br>
<br>
<button id="blueFunction" onclick="blueFunction()">Blue</button>
<button id="pinkFunction" onclick="pinkFunction()">Pink</button>
// Include additional color buttons here
<script type="text/javascript" src="Javascript.js"></script>
</html>