Onclick图片按钮-逻辑不合理 [英] Onclick Image button - Logic not making sense

问题描述

使用JavaScript/html中非常简单的onClick函数使我感到非常困惑.我知道对此有很多问题，但是鉴于我的脚本的作用(或者在这种情况下没有)，我无法找到答案.它应该很简单，但是由于某种原因，逻辑也无法按我期望的那样工作.

I'm having a very confusing time with this very simple onClick function in Javascript/html. I know there are many questions on this but couldn't quite find an answer given what my script does (Or doesn't in this case). It should be simple but for some reason the logic is just not working as I expect it too.

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

因此，如您所见，这应该采用原始的关闭按钮"图片并将其交换为按按钮"如果提供点击，则显示"Off Button.jpg".

So as you can see this should take the original "off button" image and swap it to "on button" when it is clicked provided it is showing the "Off Button.jpg".

但是，它什么也没做，使用Chrome开发人员工具，我什至看不到脚本启动.但是当我进行这些更改时:

However, it does nothing, using the Chrome developer tools I can see the script doesn't even fire. But when I make these changes:

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

现在它会触发并将按钮更改为在按钮上".但不会再次触发以将其改回.对我来说，从逻辑上讲这没有任何意义，但我可能只是想念一些确实很明显的东西.我知道这是非常基本的，但是任何帮助或解释都将不胜感激.

It now fires and changes the Button to "On Button" but does not fire again to change it back. For me, this makes no sense logically but I might just be missing something really obvious. I know this is pretty basic but any help or explanation would be appreciated.

推荐答案

我对代码做了一些更改，现在可以正常工作了. 我将相对路径与./一起用于img src，大多数情况下，您应该避免使用空格来命名图像或其他名称-空格总是会引起问题;)

I did some changes to the code and now it's working. I used the relative path with ./ to img src and mostly you should avoid use spaces to name images or anything else - spaces always cause problems ;)

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

注意-记住还要重命名图像文件夹中的图像

Note - Remember to rename the images inside the images folder as well

这篇关于Onclick图片按钮-逻辑不合理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！