基本的 JavaScript 问题

发布于 2024-11-12 04:28:26 字数 850 浏览 1 评论 0原文

我正在研究《Head First Javascript》一书。所以我的问题是为什么我的函数 turnSad() 中的 if 子句没有触发？更新我已经在 Chrome 和 FF4 中尝试过此操作。另外，如果我注释掉 if 语句，该函数就会起作用。

<script type="text/javascript">

    function turnSad() {
        if (document.getElementById("rockImg").src == "rock_happy.png")
            document.getElementById("rockImg").src = "rock.png";
    }

    function touchRock() {
        var userName = prompt("What is your name?", "Enter your name here");

        if (userName) {
            alert("It is nice to meet you " + userName + ".");
            document.getElementById("rockImg").src = "rock_happy.png";
        }
        setTimeout("turnSad();", 1000);
    }

</script>
<img id="rockImg" src="rock.png" alt="iRock"  style="cursor:pointer" 
    onclick="touchRock();" />

原文

I'm messing around with the Head First Javascript book. So my question is why doesn't the if clause in my function turnSad() trigger? UPDATE I've tried this in Chrome and FF4. Also, if I were to comment out the if statement, the function will work.

<script type="text/javascript">

    function turnSad() {
        if (document.getElementById("rockImg").src == "rock_happy.png")
            document.getElementById("rockImg").src = "rock.png";
    }

    function touchRock() {
        var userName = prompt("What is your name?", "Enter your name here");

        if (userName) {
            alert("It is nice to meet you " + userName + ".");
            document.getElementById("rockImg").src = "rock_happy.png";
        }
        setTimeout("turnSad();", 1000);
    }

</script>
<img id="rockImg" src="rock.png" alt="iRock"  style="cursor:pointer" 
    onclick="touchRock();" />

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

可遇━不可求 2024-11-19 04:28:26

当访问 src 属性（而不是属性）时，浏览器可能会自动解析相对路径并返回包括协议、域、端口等的绝对路径。

要获取或更改属性值，请使用 <代码>getAttribute 和setAttribute。

image.getAttribute("src");

image.setAttribute("src", "someImage.png");

请参阅此示例。

When accessing the src property (not the attribute), browsers may automatically resolve relative paths and give back the absolute path including the protocol, domain, port, etc.

To get or change the attribute value, use getAttribute and setAttribute.

image.getAttribute("src");

image.setAttribute("src", "someImage.png");

See this example.

回复收藏 0 原文

只怪假的太真实 2024-11-19 04:28:26

@Anurag 的回答很棒，这是你能做的最好的事情，周围的每个浏览器都支持 getAttribute() （在 IE 5.5-7 中存在错误，但为了获取 src它工作正常）。

我只是想添加几件事：

不要使用setTimeout()的字符串语法，始终传入一个函数（您可以传入一个闭包来运行多个函数），这被认为是最佳实践。字符串变体的工作方式类似于众所周知的邪恶混蛋eval()。所以你的代码应该看起来像（同样适用于setInterval）：
```
setTimeout(turnSad, 1000);
```
除了使用 getAttribute()（这是最好的方法）之外，您还可以编写正则表达式方法。我添加这个只是为了好玩和拓宽视野，请使用@Anurag的解决方案。
```
if (document.getElementById("rockImg").src.match(/(^|\/)rock_happy\.png$/i)) {
    document.getElementById("rockImg").src = "rock.png";
}
```
这将尝试以不区分大小写的方式进行匹配，在字符串末尾查找 rock_happy.png，具有字符串的开头或 /在它之前。
jsFiddle 演示

@Anurag's answer is great, that's the best you can do, getAttribute() is supported by every browser that is around (being buggy in IE 5.5-7 but for getting src it works fine).

I just wanted to add a few things:

Don't use setTimeout()'s string syntax, always pass in a function (you can pass in a closure to run more than one functions), which is considered best practice. The string variation works like eval(), the widely known evil bastard. So your code should look like (same applies to setInterval):
```
setTimeout(turnSad, 1000);
```
Othen than using getAttribute(), which is the best approach, you can also write a regex approach. I only add this for fun and broadening the view, please use @Anurag's solution.
```
if (document.getElementById("rockImg").src.match(/(^|\/)rock_happy\.png$/i)) {
    document.getElementById("rockImg").src = "rock.png";
}
```
This will try to match in a case-insensitive way, looking for rock_happy.png in the end of the string, having either the beginning of the string or / before it.
jsFiddle Demo