正确调用if语句中的元素 [英] calling elements in an if statement correctly

问题描述

function renderOne() {
  var first = [
    "resources/red1.png",
    "resources/red2.png",
    "resources/red3.png",
    "resources/green1.png",
    "resources/green2.png",
    "resources/green3.png",
    "resources/blue1.png",
    "resources/blue2.png",
    "resources/blue3.png"
  ];
  document.getElementById("pic").src = first[Math.floor(Math.random() * first.length)];
}


document.getElementById("shade1").onclick = function() {
    if (document.getElementById("pic").src === "resources/red1.png") {
      document.getElementById("pic").src = "resources/gover.png";
    }
};

当我在src为red1.png时按下按钮时，它不起作用。 if语句不起作用，我认为是这一行：

When I press the button when src is red1.png, it doesn't work. The if statement isn't working, and I assume it's this line:

(document.getElementById("pic").src === "resources/red1.png")

。



它有什么问题？

in the if-statement.

What's wrong with it?

推荐答案

一些注意事项：



再做一次这样做真不好并再次每次调用 renderOne ：你创建一个的实例，然后调用文档.getElementById 。 相反，你应该只做一次并将这两个对象从外部上下文代码传递给函数，在那里你需要它。



是的，我理解冗余重复陈述的性能成本不会明显，但是......习惯本身就很糟糕。



但是还有什么比这更糟糕的？编写不可维护的代码。用red1.png比较某事的整个想法是错误的。您在数组中使用相同的URL两次，并进行比较。如果您决定更改文件名会怎样？不，所有常量应该只出现一次，否则这是反模式，称为魔术字符串。整个想法都错了。相反，您可以在一开始就从同一个数组中将默认URL设置为 src ，并且每次设置此属性的任何值时，都保留数组索引as current ，上层上下文中的某个对象。并将此索引与您点击时的默认值进行比较。您是否希望一个预定义图像始终跟随另一个预定义图像？一样。定义两个指数。或者条件URL和另一个URL的一个索引。明确定义一切。另请参阅：魔术字符串 - 维基百科，免费百科全书 [ ^ ]。

-SA

Some notes:

It's not nice that doing it again and again on each call to renderOne: you create an instance of first and then call document.getElementById. Instead, you should do it only once and pass these two object to the function from outer-context code, where you need it.

Yes, I understand that performance cost of the redundant repeated statements will be not noticeable, nevertheless… The habit itself is bad.

But what could be worse than that? Writing unmaintainable code. The whole idea of comparison of something with "red1.png" is wrong. You use the same URL twice, in the array and in comparison. What happens if you decide to change the file name? No, all constant should appear once and only once, otherwise this is an anti-pattern called magic string. The whole idea is wrong. Instead you can, for example, set the default URL as src from the same array in the very beginning and, every time you set any value of this attribute, preserve the array index as current, some object on upper-level context. And compare this index with the default on your click. Do you want to have one predefined image to be always followed by another predefined image? Same thing. Define two indices. Or one index for conditional URL and another URL. Define everything explicitly. See also: Magic string — Wikipedia, the free encyclopedia[^].

—SA

使用此代码

Use this code instead

if (document.getElementById("pic").getAttribute("src") === "resources/red1.png") {
    document.getElementById("pic").src = "resources/gover.png";
}

当您查询.src时，您将获得完全限定的图像src，而不仅仅是src属性中的内容，所以.src将返回http：//localhost/yoursite/resources/red1.png，这将无法与resources / red1.png进行比较。



您可以通过一些简单的调试技术自己发现这一点，例如添加这样的行;

When you query .src you get the fully qualified image src, not just what is in the src attribute, so .src will return "http://localhost/yoursite/resources/red1.png", which will fail the comparison against "resources/red1.png".

You could have discovered this yourself via some simple debugging techniques such as adding a line like this;

document.getElementById("shade1").onclick = function () {
    alert(document.getElementById("pic").src);

我们没办法知道为什么它不起作用，因为我们无法运行此代码。



这是你需要做的事情。



1.在浏览器中运行你的页面。 />
2.在浏览器中查看源代码并确保实际存在id为pic的元素，并检查它当前是什么样的src。它可能是完整的URL而不仅仅是resources / red1.png。

3.如果一切正常，那么调试代码。在shade1的.onclick上放置一个断点，确保实际找到了shade1并且是正确的元素。

4.调试代码。

5.重复步骤4.

There is no way for us to know why it isn't working because we cannot run this code.

Here's what you need to do.

1. Run your page in the browser.
2. View source in the browser and make sure there actually is an element with id of "pic" and check what's it's src is currently. It may be the full url instead of just resources/red1.png.
3. If everything looks right then debug the code. Put a breakpoint on the .onclick of shade1 and make sure shade1 is actually being found and is the right element.
4. Debug the code.
5. Repeat step 4.

这篇关于正确调用if语句中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！