我对 Javascript/html 中这个非常简单的 onClick 函数感到非常困惑。我知道对此有很多问题，但鉴于我的脚本的作用（或者在本例中没有），无法完全找到答案。它应该很简单，但由于某种原因，逻辑也没有像我期望的那样工作。
<h1>The onclick Event</h1>
<img id="onoff" onclick="changeImage();" src="images/Off Button.jpg" width="245" height="238">
<p>Click on button to turn "on"</p>
<script>
function changeImage() {
var image = document.getElementById("onoff");
if (image.src.match("Off Button.jpg")){
image.src = "images/On Button.jpg";
}
else{
image.src="images/Off Button.jpg";
}
}
</script>
正如您所看到的，这应该采用原始的“关闭按钮”图像，并在单击时将其交换为“打开按钮”，前提是它显示“关闭按钮.jpg”。
然而，它什么也没做，使用 Chrome 开发者工具我可以看到脚本甚至没有触发。但是当我做出这些改变时：
if (image.src.match("Off Button.jpg")){
image.src = "images/Off Button.jpg";
}
else{
image.src="images/On Button.jpg";
现在它会触发并将按钮更改为“On Button”，但不会再次触发以将其更改回来。对我来说，这在逻辑上没有意义，但我可能只是错过了一些非常明显的东西。我知道这是非常基本的，但任何帮助或解释将不胜感激。
我对代码做了一些更改，现在它可以工作了。
我使用了相对路径./到 img src 并且大多数情况下您应该避免使用空格来命名图像或其他任何内容 - 空格总是会导致问题；）
<h1>The onclick Event</h1>
<!-- relative path and no space in name on src -->
<img
id="onoff"
onclick="changeImage();"
src="./images/off-button.jpg"
width="245"
height="238"
/>
<p>Click on button to turn "on"</p>
<script>
function changeImage() {
var image = document.getElementById('onoff');
if (image.src.match('off-button.jpg')) { /* no space in name */
image.src = './images/on-button.jpg'; /* relative path and no space
in name */
} else {
image.src = './images/off-button.jpg'; /* relative path and no space
in name */
}
}
</script>
注意 - 请记住也要重命名图像文件夹中的图像
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
