JSFiddle - React, Tailwind, and code Playground

by alemonteiro

HTML

<button type="button" id="btnViewCounts">View Clicks Counts</button>

<br/>

<img id="img1" src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" />
<img id="img2" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcScGS5_op0G8Qop-zyEZasXr9xf5p8MKkPuzjmhBJ2u78E4nVg3" />
<img id="img3" src="http://media.tumblr.com/d2bc2fbbc085be9b73cc574df6ee964e/tumblr_inline_mqll9rwKGP1qz4rgp.gif" />

<button type="button" id="btnViewCounts">View Clicks Counts</button>

JavaScript

var clickcounter = {};

var countClicks = function() {
	if ( clickcounter[this.src] === undefined) {
  	clickcounter[this.src] = 1;
  }
  else {
  	clickcounter[this.src] = clickcounter[this.src] + 1;
  }
};

document.getElementById('img1').onclick = countClicks;
document.getElementById('img2').onclick = countClicks;
document.getElementById('img3').onclick = countClicks;

document.getElementById('btnViewCounts').onclick = function() {
	var h = '';
  for(var p in clickcounter) {
  	h = h + clickcounter[p] + ' clicks on ' + p + '\n\r';
  }
  
  if ( h == '') h = 'No image was clicked yet.'
  
  alert(h);
};