Question

试图学习JavaScript并在w3schools学习过的嗨家伙...遇到了一次尝试，将图像从smiley.gif翻转到landscape.jpg ...所以我决定我要看看我是否学到了什么通过使用按钮翻转它效果很好...但是后来我决定，每次单击时，我都会使其从smiley.gif到风景再到笑脸等来回移动... 嗯，那是当挫折感开始的时候。.我尝试了百万种方法，而不是我最初在代码部分开始的方法..有人可以向我解释为什么这不起作用..我没有控制台错误...它仍然会在第一次点击时从笑脸最初转换为横向，但在第二次点击时再也不会变回笑脸。预先感谢

<img id="image" src="smiley.gif" width="160" height="120"><br>
<button onclick= myFunc() >Click</button>;

<script>
  function myFunc() {

    if (document.getElementById("image").src == "smiley.gif") {

      return document.getElementById("image").src = "landscape.jpg"

    } else {

      return document.getElementById("image").src = "smiley.gif"

    }
  };
</script>

<p>The original image was smiley.gif, but the script changed it to landscape.jpg</p>

Answer 1

问题

元素的src属性返回图像的完整路径，包括协议。

尽管您已将属性设置为smiley.gif，但如果要console.log设置属性值，则类似于http://mywebsite.com/smiley.gif。显然，这不等于smiley.gif。

使用src属性：

console.log(document.getElementById("image").src);

<img id="image" src="test.jpg">

将来，请确保执行以下基本调试步骤。如果您的条件不合适，那么第一步就是验证您要比较的值是否符合您的期望。

解决方案

您希望从元素中检索src 属性，而不是使用src属性。我们可以使用Element.getAttribute()很容易地做到这一点。

使用src属性：

console.log(document.getElementById("image").getAttribute("src"));

<img id="image" src="test.jpg">

您的if条件应如下所示：

if (document.getElementById("image").getAttribute("src") == "smiley.gif")

Answer 2

与==或===

比较

=设置该值，除设置假值外，大多数情况下为真

Answer 3

页面加载时，您应该获得src中的img，以便您可以将其进行比较，因为src为您提供了img源的完整限定路径。

<img id="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTY2gmwvcnkECDTu_N4qcfJs_5Nh1Usa8v3f-GaAzQcZxL70GpKCA" width="160" height="120"><br>
<button onclick= "myFunc()" >Click</button><br/>
<span id="result"></span>

<script>
var imgsrc = document.getElementById("image").src;
var result = document.getElementById("result");
  function myFunc() {

    if (document.getElementById("image").src == imgsrc) {
      result.innerHTML = "Image source: "+"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVQT4TyiJEFCRA3pmetp3fgZHpgQtzM1hKJMhvAJhOGchqHXQX";
      return document.getElementById("image").src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVQT4TyiJEFCRA3pmetp3fgZHpgQtzM1hKJMhvAJhOGchqHXQX"

    } else {
     result.innerHTML = "Image source: "+"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTY2gmwvcnkECDTu_N4qcfJs_5Nh1Usa8v3f-GaAzQcZxL70GpKCA";
      return document.getElementById("image").src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTY2gmwvcnkECDTu_N4qcfJs_5Nh1Usa8v3f-GaAzQcZxL70GpKCA"

    }
  };
</script>

Javascript IF-Else无法正常工作

3 个答案:

问题

解决方案