I am attempting to create an interactive feature where clicking on any image will either reveal a clear version of the picture if it is blurred, or blur the picture if it is clear.
The current issue I am facing is that when I click on a blurred image, it becomes clear, but clicking on it again does not re-blur the image. Additionally, clicking on a clear image does not blur it as intended.
Below is the code snippet in question:
<script>
window.onload = init;
function init(e) {
var img = document.getElementsByTagName("img");
img[0].onclick = unblur;
img[1].onclick = unblur;
img[2].onclick = unblur;
}
function unblur(e) {
var imageId = e.target.id;
var img = document.getElementById(imageId);
var imageSource = img.src;
var clearImg = imageSource.substring(0, imageSource.length - 8);
var unblurredImg = imageId.concat('.jpg');
var blurredImg = imageId.concat('blur.jpg');
if (img.src == unblurredImg) {
img.src = blurredImg;
} else {
img.src = unblurredImg;
}
}
</script>
</head>
<body>
<div id="pics">
<img id="zero" src="zeroblur.jpg">
<img id="one" src="oneblur.jpg">
<img id="two" src="two.jpg">
</div>
</body>
</html>
After experimenting with different conditions inside the unblur() function, I realized that switching the order of these conditions had unexpected outcomes. For example...
if (img.src == unblurredImg) {
img.src = blurredImg;
} else {
img.src = unblurredImg;
}
This change caused no response when clicking on a blurred image, whereas the previous code would at least reveal the cleared image. The only alteration made was switching the sequence of the conditions.
Why did this adjustment lead to different results? Can you spot why there may be a difference?