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

我对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 Button”，但不会再次启动以将其更改回原来的状态。对我来说，这在逻辑上毫无意义，但我可能只是错过了一些非常明显的东西。我知道这是非常基本的，但任何帮助或解释都将不胜感激。

我对代码做了一些更改，现在它开始工作了。 我使用了img src的相对路径

/

，大多数情况下，您应该避免使用空格来命名图像或其他任何东西-空格总是会导致问题；）

onclick事件
点击按钮打开“开启”

函数changeImage（）{
var image=document.getElementById（'onoff'）；
if（image.src.match（'off-button.jpg'）{/*名称中没有空格*/
image.src='./images/on-button.jpg'；/*相对路径，无空格
名义上*/
}否则{
image.src='./images/off button.jpg'；/*相对路径，无空格
名义上*/
}
}

---

注意-请记住重命名images文件夹中的图像

我对代码做了一些更改，现在可以使用了。 我使用了img src的相对路径

/

，大多数情况下，您应该避免使用空格来命名图像或其他任何东西-空格总是会导致问题；）

onclick事件
点击按钮打开“开启”

函数changeImage（）{
var image=document.getElementById（'onoff'）；
if（image.src.match（'off-button.jpg'）{/*名称中没有空格*/
image.src='./images/on-button.jpg'；/*相对路径，无空格
名义上*/
}否则{
image.src='./images/off button.jpg'；/*相对路径，无空格
名义上*/
}
}

---

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

match

正则表达式。你的意思是

包括
。空格在URL中转换为
%20
，而
src
属性是URL。
src
属性与
src
属性不同，即
img.getAttribute（“src”）
。为什么不简单地登录
img.src
来查看它包含的内容呢？这里有一种不太容易出错的处理应用程序状态的方法：您好，我不知道空格的读取方式与此不同。我将源图像名称和脚本的名称更改为“开”/“关”，整个脚本现在可以按预期工作。感谢@user4642212的澄清。出于好奇，在使用JavaScript时，您是否永远不要在src文件名中添加空格，或者在如此大规模的网站上是如何工作的？请参阅。当然，您可以使用文件名中的空格。你只需要知道属性和属性之间的区别。哦，感谢你的链接，现在变得更有意义了。我现在更清楚地看到我的脚本中的工作内容。非常感谢。
match
需要正则表达式。你的意思是
包括
。空格在URL中转换为
%20
，而
src
属性是URL。
src
属性与
src
属性不同，即
img.getAttribute（“src”）
。为什么不简单地登录
img.src
来查看它包含的内容呢？这里有一种不太容易出错的处理应用程序状态的方法：您好，我不知道空格的读取方式与此不同。我将源图像名称和脚本的名称更改为“开”/“关”，整个脚本现在可以按预期工作。感谢@user4642212的澄清。出于好奇，在使用JavaScript时，您是否永远不要在src文件名中添加空格，或者在如此大规模的网站上是如何工作的？请参阅。当然，您可以使用文件名中的空格。你只需要知道属性和属性之间的区别。哦，感谢你的链接，现在变得更有意义了。我现在更清楚地看到我的脚本中的工作内容。非常感谢。
    if (image.src.match("Off Button.jpg")){
        image.src = "images/Off Button.jpg";
    }
    else{
        image.src="images/On Button.jpg";

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