Making an image change once it is clicked with JavaScript

Question

I'm following a tutorial in the internet to learn some basic Javascript. One of the steps is to have an image change to another one once the user clicks over it, however, it is not working. I've found some tutorials during my research, but all of them include functions that I have yet to learn, so I would like to stick to the tutorial as much as possible.

Here's the JS script:

var myImage = document.querySelector('img');
myImage.onClick = function() {
    var mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/1.png') {
        myImage.setAttribute ('src', 'images/2.png');
    } else {
        myImage.setAttribute ('src', 'images/1.png');
    }
}

Here's the link for the tutorial I'm using: https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics

And here's the project's Github link: https://github.com/Pedro12909/test

This should help: stackoverflow.com/questions/9731728/…

Hardyson Arthy
– Hardyson Arthy

2016-07-12 02:21:22 +00:00
Commented Jul 12, 2016 at 2:21 — Hardyson Arthy
– Hardyson Arthy, Commented Jul 12, 2016 at 2:21

guest271314 · Accepted Answer · 2016-07-12 02:23:05Z

1

The issue is .onClick is not defined. Use .onclick with lowercase "c"

answered Jul 12, 2016 at 2:23

guest271314

1

Sign up to request clarification or add additional context in comments.

1 Comment

Pedro Portela Over a year ago

thanks for the help, it took me 4 hours to figure this out!!!! i love you forever <3 brb, going to smash my head against a wall now....

Krishnakumar_Muraleedharan · Accepted Answer · 2016-07-12 02:22:24Z

0

If you are using query selector,then you will have to bind the click event for all images in the page. Query selector will return a list of HTML elements, and you will have to iterate through them. Try adding an id to the img tag ,say imageId and do the following modification.

var myImage = document.getElementById('imageId');
myImage.onclick = function() {
	var mySrc = myImage.getAttribute('src');
	if(mySrc === 'images/1.png') {
		myImage.setAttribute ('src', 'images/2.png');
	} else {
		myImage.setAttribute ('src', 'images/1.png');
	}
}

answered Jul 12, 2016 at 2:22

Krishnakumar_Muraleedharan

4494 silver badges13 bronze badges

Collectives™ on Stack Overflow

Making an image change once it is clicked with JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related