JavaScript：在 2 个图像之间切换无效，使用 setInterval

Question

JS 新手。我试图在页面加载开始时每 1 秒显示两张图片 dragon.svg 和 dragon1.svg 以及无限期显示运行之间切换。但是，我的图像只改变一次，然后每秒保持运行但不遵循我的 if/else 语句的规则。

我怀疑该函数在每次运行时都没有更改名为 dragonDiv 的全局变量的值，因此每次运行时，它都使用 dragonDiv 的原始值变量。

在HTML上，我有一个div，里面有图片，像这样：

<body onload="changeDragon();">
    <div id="dragonarea">
      <img src="images/dragon.svg"/>
    </div>
</body>

然后我有这个 JS，它应该将图像更改为 dragon1.svg 如果当前是 dragon.svg，反之亦然，每 1 秒一次。

function changeDragon() {
  changeInterval = setInterval(dragonColorChange, 1000);
}

let dragonDiv = document.getElementById('dragonarea');
console.log(dragonDiv.innerHTML); // Correctly logs <img src="images/dragon.svg"/>

function dragonColorChange() {
  if (dragonDiv.innerHTML = '<img src="images/dragon.svg">') {
    dragonDiv.innerHTML = '<img src="images/dragon1.svg">';
    console.log(dragonDiv.innerHTML) // Correctly logs <img src="images/dragon1.svg"/>
  } else {
    dragonDiv.innerHTML = '<img src="images/dragon.svg">';
    console.log(dragonDiv.innerHTML) // Never makes it to this point
  }
}

如上所述，控制台日志告诉我它第一次正确地更改了图像，但在那之后，它似乎再次采用 dragonDiv 的原始值（dragon.svg image) 和运行那个 innerHTML 上的函数再次（因此再次将其更改为 dragon1.svg），而不是在 [=46= 之后更新 innerHTML ] 函数一次，正如我告诉它的那样，并强制它执行 else 语句。

我尝试将 dragonDiv 变量放在 dragonColorChange 函数内部以及外部作为全局变量。我尝试使用 document.getElementById('dragonarea').src 而不是替换 div 标签的整个内部 HTML。我尝试使用 === 而不是 =。我尝试了大约 4 个小时的各种其他事情，但我无法弄清楚如何让它继续循环 if/else 语句。

我的代码有什么错误吗？

Answer 1

if 条件中有错字。赋值运算符不是与 == 或 === 进行比较，而是进行赋值而不是比较。尝试将其更改为比较。

Answer 2

我猜错字了，使用===或==进行比较。此外，body 上的 onload 函数有不同的引号 [”]（当我在 jsfiddle 上复制并粘贴时，它不起作用）而不是 ["]

function changeDragon() {
  changeInterval = setInterval(dragonColorChange, 1000);
}

let dragonDiv = document.getElementById('dragonarea');
/* console.log(dragonDiv.innerHTML); // Correctly logs <img src="images/dragon.svg"/> */

function dragonColorChange() {
  if (dragonDiv.innerHTML === '<img src="images/dragon.svg">') {
    dragonDiv.innerHTML = '<img src="images/dragon1.svg">';
    console.log(dragonDiv.innerHTML) // Correctly logs <img src="images/dragon1.svg"/>
  } else {
    dragonDiv.innerHTML = '<img src="images/dragon.svg">';
    console.log(dragonDiv.innerHTML) // Never makes it to this point
  }
}

<body onload="changeDragon();">
  <div id="dragonarea">
    <img src="images/dragon.svg" />
  </div>
</body>

Answer 3

这里我直接比较和更改 image.src，而不是像其他人已经建议的那样 div 的内部 HTML。

HTML:

<body onload="changeDragon();">
    <div id="dragonarea">
      <img id="dragon-image" src="images/dragon.svg"/>
    </div>
</body>

JavaScript:

function changeDragon() {
  changeInterval = setInterval(dragonColorChange, 1000);
}

let dragonImage = document.getElementById('dragon-image');

function dragonColorChange() {
  if (dragonImage.src === 'images/dragon.svg') {
    dragonImage.src = 'images/dragon1.svg';
  } else {
    dragonImage.src = 'images/dragon.svg';
  }
}

Answer 4

除了打字错误（= 是赋值，== 或 == 是比较），您还可以做出一些改进

使用 addEventListener
更改src，而不是innerHTML，浪费DOM渲染
我建议一个数据属性

let changeInterval;
let dragonImage;
window.addEventListener("load", function() {
  dragonImage = document.getElementById("dragonImage");
  changeInterval = setInterval(dragonColorChange, 1000);
})

function dragonColorChange() {
  const toggle = dragonImage.dataset.toggle
  const src = toggle === "0" ? "images/dragon1.svg" : "images/dragon.svg";
  dragonImage.src = src;
  dragonImage.dataset.toggle = toggle === "0" ? "1" : "0";
}

<div id="dragonarea">
  <img id="dragonImage" data-toggle="0" src="images/dragon.svg" />
</div>

Answer 5

正如其他人所说，您需要 ===。

这是一种方法，可以将变量限制在函数范围内。我正在使用 .getAttribute("src") 而不是 .src 因为它获得了相对 url 路径。

请注意，dragonColorChange 并未传递到 setInterval 中。就是调用dragonColorChange返回的函数。

  const changeDragon = function () {
    changeInterval = setInterval(dragonColorChange(), 1000);
  };

  function dragonColorChange() {
    let dragonImg = document.querySelector('#dragonarea img');
    return function () {
      dragonImg.src = dragonImg.getAttribute("src") === "images/dragon.svg" ? "images/dragon1.svg" : "images/dragon.svg";
    }
  }

JavaScript：在 2 个图像之间切换无效，使用 setInterval

JavaScript: Toggling Between 2 Images Not Working, Using setInterval

javascript

setinterval