如何通过Element ID切换图片（Javascript）？

Question

我正在学习Javascript，不明白为什么当我引用图片的ID时，以下内容不会切换出来。 URL 工作正常，但为了简单和清晰起见，我更喜欢使用分配的 ID。我试图通过单击“MarioImg”将“MarioImg”替换为“Img_1”。这是一个很长的文档，所以我将缩短代码：

<img id="MarioImg" class="mariowonder" src="https://media.gamestop.com/i/gamestop/20006717?$pdp$$&fmt=webp" ;/>

<img onclick="SwitchImg1()" id="Img_1" class="mariosideimg" src="https://media.gamestop.com/i/gamestop/20006717?$pdp$$&fmt=webp" />

<script>
  function SwitchImg1() {
    document.getElementById("MarioImg").src =
      document.getElementById("Img_1");
  }
</script>

如果我只使用该网址，则该网址有效。然而，当使用 ID 时，会显示一张白色和绿色的小纸，但没有图像。我认为它没有加载？

Answer 1

您需要对第一个

src

标签的

img

使用临时变量

<img id="MarioImg" class="mariowonder" src="https://unsplash.com/photos/RgplfXbxLFs"/>

<img onclick="SwitchImg1()" id="Img_1" class="mariosideimg" src="https://unsplash.com/photos/X-Far-t1woI" />
</body>

<script>
  function SwitchImg1() {
    src1 = document.getElementById("MarioImg").src;
    document.getElementById("MarioImg").src = document.getElementById("Img_1").src;
    document.getElementById("Img_1").src = src1
  }

</script>

Answer 2

我忘记将 .src 元素添加到 Img_1 引用的末尾。这样做解决了它！