如何使用switch(clickCount)函数改变多张图片然后改变url
How to use a switch (clickCount) function to change multiple images then change url
我正在尝试找到一种方法来多次更改图像,然后导航到新的 url;全部通过单击相同的按钮。我一直在玩一个 switch (clickCount) 函数,从其他人的建议和我在其他地方读到的内容来看,这似乎是最好的解决方案。
但是,我以前从未使用过 switch 或 clickCount,尽管 reading/watching 有几个教程,但我还是无法使代码正常工作。但我不知道为什么(我很确定这是非常明显的,我有限的知识未能发现)而且我已经在这个问题上停留了一个星期了,所以没有任何意义了!
我目前的代码...
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>
- input type=image 是一个提交按钮
- 您没有将 clickHandler 附加到按钮
尝试
<button type="button" onclick="clickHandler()"><img
src="silvercogarrow.png" alt="Enter" /></button>
我正在尝试找到一种方法来多次更改图像,然后导航到新的 url;全部通过单击相同的按钮。我一直在玩一个 switch (clickCount) 函数,从其他人的建议和我在其他地方读到的内容来看,这似乎是最好的解决方案。
但是,我以前从未使用过 switch 或 clickCount,尽管 reading/watching 有几个教程,但我还是无法使代码正常工作。但我不知道为什么(我很确定这是非常明显的,我有限的知识未能发现)而且我已经在这个问题上停留了一个星期了,所以没有任何意义了!
我目前的代码...
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>
- input type=image 是一个提交按钮
- 您没有将 clickHandler 附加到按钮
尝试
<button type="button" onclick="clickHandler()"><img
src="silvercogarrow.png" alt="Enter" /></button>