如果`if`不能检查`<img>`标签的`src`值

Question

如果`if`不能检查`<img>`标签的`src`值

4

我不明白我的代码哪里出了问题。在这种情况下，if似乎没有起作用。当人们点击按钮时，我想要图片发生变化。请有人帮忙吗？

<body>

<div>
    <img id="en_garde" src="gifattaque/gif1.png">
</div>
<br>
<button onclick=attaque_animation() type="button">Attaque</button>


<script>
    function attaque_animation() {
        if (document.getElementById("en_garde").src=="gifattaque/gif1.png") {
            document.getElementById("en_garde").src="gifattaque/gif2.png";

        }


    };
</script>
</body>
</html>

- Willy Mercier

当您引用属性值时，它是否有效？ (onclick="attaque...()") - Shomz

1

尝试使用 console.log(document.getElementById("en_garde").src) 查看 .src 属性解析为什么。 - Bergi

你可能缺少位置hostname和protocol，即图像的绝对URL（http://yourdomain.com/file/gifattaque/gif1.png）。因此，请尝试将其添加到图像路径中，然后进行比较。 - Akshaya Raghuvanshi

如果您编写有效的HTML代码，这可能会有所帮助。 - Lightness Races in Orbit

2个回答

0

要选择元素，您可以使用：

document.querySelector('[src$="gif1.png"]')

它将检查以“gif1.png”结尾的src属性。

var el = document.querySelector('[src$="gif1.png"]');
   
if (el)
el.src="gifattaque/gif2.png";

console.log(el)

- maioman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul Roub · Accepted Answer

< p > < code >src< /code >属性将被扩展为完整的图像源（包括< code >http://...），因此不会完全匹配您要查找的值。

你最好检查属性的< em >结尾:

if (document.getElementById("en_garde").src.match(/gifattaque\/gif1\.png$/))
  document.getElementById("en_garde").src = "gifattaque/gif2.png";