How to use image onclick event

Question

I 've got an image in my application. I try to change this image to another by onclick event, but I don't know why it doesn't work. Here is my code:

<body>
<div> 
  <img onclick="click()" src="http://chittagongit.com//images/smile-icon/smile-icon-6.jpg" id="smile">
</div>
<script>
  function click () {
    document.getElementByID("smile").src = "http://chittagongit.com//images/smile-icon/smile-icon-5.jpg"
  }
</script>

The same code at codepen: https://codepen.io/szczypkamaciek/project/editor/DBrPbw

Thanks for help!!!

getElementById not getElementByID – Mahmoud Farahat Jan 07 '19 at 17:41 — Mahmoud Farahat, Jan 07 '19 at 17:41

score 1 · Accepted Answer · answered Jan 07 '19 at 17:37

Make sure to check the console when things are working the way you expect. You misspelled "getElementByID" it should be "getElementById" (lower-case "d").

Also it's generally better practice to use addEventListener:

<script>
  var smile = document.getElementById("smile");
  smile.addEventListener('click', function () {
    smile.src = "http://chittagongit.com//images/smile-icon/smile-icon-5.jpg"
  });
</script>

score 0 · Answer 2 · answered Jan 07 '19 at 17:38

0

Mistake document.getElementById Id not with capital ID

function click() {
    document.getElementById("smile").src = "http://chittagongit.com//images/smile-icon/smile-icon-5.jpg"
}

answered Jan 07 '19 at 17:38

Shailesh Rathod

157
10

score 0 · Answer 3 · answered Jan 07 '19 at 18:04

There are two problems in this code:

Misspeled getElementById (insted of getElementByID)
Your code can't work in this form becuase you are using click() as your function name. Using click this way will fire click event, not your function - you can read more here: click() in JS

Anyway in general it's better practise to use listeners instead of direct node declaration.

How to use image onclick event

3 Answers3