Question

我正在尝试将图片的src更改为<select>中当前所选选项的值。我的功能看起来像这样;

function changeImage() {
  var gameValue = document.getElementById("select-games").value;
  document.getElementById("select-game-picture").src = "img/game_" + gameValue + ".png";
}

我对JavaScript还不是很有经验，所以我不知道这里可能有什么问题 - 我从w3schools中混合了一些代码，而一些来自Stackoverflow的代码 - 当然改变了ID等等。

我的形象：

<img class="game-picture" alt="Logo of chosen game" id="select-game-picture" onchange="changeImage()">

有谁知道我在这里做错了什么......？ :) 提前谢谢。

Answer 1

您必须将onchange事件添加到select元素，而不是img元素。

示例：

function changeImage() {
  var gameValue = document.getElementById("select-games").value;
  document.getElementById("select-game-picture").src = "img/game_" + gameValue + ".png";
}

<select id="select-games" onchange="changeImage()">
  <option value="game1">Game 1</option>
  <option value="game2">Game 2</option>
  <option value="game3">Game 3</option>
  <option value="game4">Game 4</option>
</select>
<img class="game-picture" alt="Logo of chosen game" id="select-game-picture">

更改图像src onchange og选择

1 个答案: