如何通过 JavaScript 更改图像来源？

Question

So, right now, I have this code, which has an upvote and downvote image (img/upvote.png and img/downvote.png) and when they are clicked, they should change source to img/orangeupvote.png, and downvote to orangedownvote.png (which are also both images in the img folder directory). So, for this I have this code:

<div style="position: fixed; margin-left: 1030px; margin-top: 235px">
    <img class="textupvote" id="textUpvoteImg" src="img/upvote.png" alt="upvote" onclick="changetextUpvote()" style="width: 100px; margin-bottom: 28px; cursor: pointer">
    <img class="textdownvote" id="textDownvoteImg" src="img/downvote.png" alt="downvote" onclick="changetextDownvote()" style="width: 120px; margin-top: -12px; position: fixed; cursor: pointer">
</div>

<script type="text/javascript">

function changetextUpvote() {
  var textUpvoteImg = document.getElementById('textUpvoteImg');
  if (textUpvoteImg.src.match("orangedownvote")) {
    textUpvoteImg.src = "img/upvote.png";
  } else {
    textUpvoteImg.src = "img/orangedownvote.png";
  }
}

function changetextDownvote() {
  var textDownvoteImg = document.getElementById('textDownvoteImg');
  if (textDownvoteImg.src.match("orangeupvote")) {
    textDownvoteImg.src = "img/downvote.png";
  } else {
    textDownvoteImg.src = "img/orangeupvote.png";
  }
}

</script>

So, when I try this out on a different document, it's working. The upvote and downvote images are both successfully changing to the orange versions of them (orangeupvote.png and orangedownvote.png), on click. However, when I try this on my current document, it isn't working. I even inspected, and on click, it isn't changing source, but then for any other image (anything which isn't orangeupvote.png or orangedownvote.png) is working. If is specify any other image on click, it's working, but orangeupvote.png and orangedownvote.png aren't working.

Answer 1

In order to write modern JavaScript you should define the Event-Listeners with addEventLisener:

Also, you should not pass a function call to onclick Attribute, but only the function reference, which should be executed on click.

Correct: onclick="changetextUpvote"

I'm not sure, whether the if-statements inside the Click-Handler do what they should..Maybe, I'd rather use String.prototype.includes instead of match ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes ).

<div style="position: fixed; margin-left: 1030px; margin-top: 235px">
    <img class="textupvote" id="textUpvoteImg" src="img/upvote.png" alt="upvote" style="width: 100px; margin-bottom: 28px; cursor: pointer">
    <img class="textdownvote" id="textDownvoteImg" src="img/downvote.png" alt="downvote" style="width: 120px; margin-top: -12px; position: fixed; cursor: pointer">
</div>

<script type="text/javascript">
  var textUpvoteImg = document.getElementById('textUpvoteImg');
  var textDownvoteImg = document.getElementById('textDownvoteImg');

function changetextUpvote() {
  if (textUpvoteImg.src.includes("orangedownvote")) {
    textUpvoteImg.src = "img/upvote.png";
  } else {
    textUpvoteImg.src = "img/orangedownvote.png";
  }
}

function changetextDownvote() {
  if (textDownvoteImg.src.includes("orangeupvote")) {
    textDownvoteImg.src = "img/downvote.png";
  } else {
    textDownvoteImg.src = "img/orangeupvote.png";
  }
}
  
// Only pass the function name, not the function call (e.g. not changetextUpvote())
textUpvoteImg.addEventListener('click', changetextUpvote);
textDownvoteImg.addEventListener('click', changetextDownvote);

</script>