I'm trying to find a way to change an image multiple times, then navigate to a new url; all by clicking the same button. I've been playing around with a switch (clickCount) function, which seems to be the best solution from what other people have suggested and from what I've read elsewhere.
However, I've never used either a switch or clickCount before and I can't get the code to work despite reading/watching several tutorials. But I have no idea why (I'm pretty sure it's something very obvious that my limited knowledge is failing to spot) and I've been stuck on this issue for a week now, so nothing is making sense any more!
The code I have so far...
HTML:
<body>
<div id="wrapper" div class="toshow">
<img src="infoscreenarrows.jpg" alt="Title" />
<img src="infoscreentext.png" id="infoscreentext" alt="" />
</div>
<div id="enterbutton">
<input type=image id=multiclick img src="silvercogarrow.png" alt="Enter" >
</div>
</body>
JS:
<script>
var clickCount = 0;
function clickHandler () {
clickCount += 1;
switch (clickCount) {
case 1:
var image = document.getElementById("infoscreentext");
image.src="infoscreentext2.png";
// 1st click on SilverCogArrow changes image infoscreentext to infoscreentext2
break;
case 2:
var image = document.getElementById("infoscreentext");
image.src="infoscreentext3.png";
// 2nd click on SilverCogArrow changes image infoscreentext2 to infoscreentext3
break;
case 3:
window.location.href = "castleview.html";
// 3rd click on SilverCogArrow changes page to castleview.html
break;
}
}
</script>
Try