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，它应该每1秒将图像更改为dragon1.svg(如果当前为dragon.svg(，反之亦然。
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图像(，并再次在该innerHTML上运行函数(因此再次将其更改为dragon1.svg(，而不是像我告诉它的那样，在运行一次函数后更新innerHTML，并将其强制到else语句。
我尝试将dragonDiv变量放在dragonColorChange函数内部，也将其作为全局变量放在外部。我尝试使用document.getElementById('dragonarea').src，而不是替换div标记的整个innerHTML。我尝试使用===而不是仅使用=。我尝试了大约4个小时的其他方法，但我不知道如何让它在if/else语句中循环。
我的代码中有什么错误吗？
除了打字错误(=是赋值，==或==是比较(之外，您还可以对进行一些改进
- 使用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>
我想打字时，使用===或===进行比较。此外，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>这里我直接比较和更改image.src，而不是像其他人已经建议的那样，比较和更改div的innerHTML。
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';
}
}
正如其他人所说，您需要===。
这里有一种方法可以做到这一点，并将变量的作用域保持为函数。我使用.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";
}
}
在if条件中存在拼写错误。不与==或===进行比较，而是使用赋值运算符进行赋值而非比较。试着把它改为比较。