点击图像按钮-逻辑没有意义

Question

我在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>

正如你所看到的，这应该是原始的"；关闭按钮"；图像并将其交换为"；"on"按钮；当它被点击时，只要它显示"；关闭按钮.jpg"；。

然而，它什么也没做，使用Chrome开发工具，我可以看到脚本甚至没有启动。但当我做出这些改变时：

if (image.src.match("Off Button.jpg")){
image.src = "images/Off Button.jpg";
}
else{
image.src="images/On Button.jpg";

它现在启动并将按钮更改为"0"；"On Button"；但不会再次开火将其改回。对我来说，这在逻辑上毫无意义，但我可能只是错过了一些非常明显的东西。我知道这是非常基本的，但任何帮助或解释都将不胜感激。

Answer 1

我对代码做了一些更改，现在它可以工作了。我使用了./到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>

注意-记住重命名图像文件夹中的图像以及