<img id="dabbler" src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2019/02/1549364599Dabbling-Ducks-Thumb-150x150.jpg" />
<img id="goldeneye" src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2019/02/15493646581commongoldeneyemale.jpg" />

img {
  display: block;
  height: 10em;
  margin-bottom: 2em;
}

.fadeOut {
  animation: fadeOutAnimation 1s;
  opacity: 0;
}

@keyframes fadeOutAnimation {
   0% { opacity: 1; }
   100% { opacity: 0; }
}

var DuckImageView = function DuckImageView() {
};

DuckImageView.prototype.onClick = function onClick(e) {
  var target = e.currentTarget;

  target.className = target.className === 'fadeOut' ? '' : 'fadeOut';
};

// The browser will ignore this
if (typeof module === 'object') {
  module.exports = DuckImageView;
}

var ducks = document.getElementsByTagName('img');
var view = new DuckImageView();

for (var i = 0; i < ducks.length; i++) {
	ducks[i].addEventListener('click', view.onClick.bind(view));
}