0
247
ViewsHow do I change the source of an image via JavaScript?
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.
EDIT:
When I click the upvote button, it shows both orange downvote and upvote at the same time. This shouldn't happen. It should only show orange downvote. (Actually orange upvote, but I'm doing this to test). Similarly, with the downvote button, when clicked it should show only orange upvote, but it shows orange upvote and downvote at the same time. Here's an image for more clarity:
Image on what's occurring:
1 answers
Answer question0
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).
EDIT: Eventlisteners do not check the current img source. They just change the src to the desired image/png after click.
<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() {
// removed if-else statement here
textUpvoteImg.src = "img/orangedownvote.png";
}
function changetextDownvote() {
// removed if-else statement here
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>