單擊 javascript 更改圖像源

Question

所以，我有一個贊成的圖像，當點擊那個贊成的圖像時，它應該變成反對的圖像。 因此，在我的目錄中的 img/ 文件夾中，我有這兩個贊成和反對的圖像。 所以，基本上，當點擊upvote圖像時，它應該通過更改源（src）更改為downvote圖像，我嘗試使用Javascript來實現。

然而，發生的事情是，當點擊 upvote 按鈕時，它同時顯示 upvote 按鈕和 downvote 按鈕。 它應該只在單擊 upvote 按鈕時顯示 downvote 按鈕。 關於為什么會發生這種情況的任何線索？ 非常感謝您的幫助！

 function changetextUpvote() { var textUpvoteImg = document.getElementById("textUpvoteImg"); if (textUpvoteImg.src.match("downvote")) { textUpvoteImg.src = "img/upvote.png"; textUpvoteImg.alt = "Voted up"; // for debugging } else { textUpvoteImg.src = "img/downvote.png"; textUpvoteImg.alt = "Voted down"; // for debugging } }

 <img class="textupvote" id="textUpvoteImg" src="img/upvote.png" alt="upvote" onclick="changetextUpvote()" style="width: 100px; margin-bottom: 28px; cursor: pointer">

Answer 1

我只將您的代碼與<script>標簽一起使用，它正在工作。

<script>
function changetextUpvote() {
  var textUpvoteImg = document.getElementById("textUpvoteImg");
  if (textUpvoteImg.src.match("downvote")) {
    textUpvoteImg.src = "img/upvote.png";
  } else {
    textUpvoteImg.src = "img/downvote.png";
  }
}
</script>

<img class="textupvote" id="textUpvoteImg" src="img/upvote.png" alt="upvote" onclick="changetextUpvote()" style="width: 100px; margin-bottom: 28px; cursor: pointer">