My ultimate goal is to have a hidden box and image that will be revealed based on the result of other functions. The box should change its background color, display an image, and switch images depending on the function called.
I am facing two issues with the code provided below:
- Initially, the box appears but the images do not show up when the code is executed.
- When either function is called a second time (after working fine without errors on the first call) by the rest of the script (such as in a repeated calculator scenario), an error occurs implying that the image no longer exists:
"JavaScript runtime error: Unable to set property 'src' of undefined or null reference"
JScript:
function one(input) {
document.getElementById("result").style.background = "lightgray";
document.getElementById("result").style.color = "green";
document.getElementById("icon").src = "tick.png";
document.getElementById("icon").style.visibility = "visible";
}
function two(input) {
document.getElementById("result").style.background = "lightgray";
document.getElementById("result").style.color = "red";
document.getElementById("icon").src = 'cross.png';
document.getElementById("icon").style.visibility = "visible";
}
HTML:
<div id="result">
<img src="tick.png" id="icon" style="visibility:hidden">
</div>
And CSS (though may not be necessary):
#result {
width: 820px;
height: 450px;
border-radius: 20px;
padding-top:25px;
padding-bottom: 25px;
color: green;
font-size:40pt;
text-align: center;
margin-top: 100px;
margin-right: 150px;
margin-left:420px;
}
#result img{
margin-top: 85px;
width:220px;
height: 190px;
}