JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<div class="main">
	<div class="text">IMG без ID (клик НЕ сработает)<img src="https://i1.wallbox.ru/wallpapers/small/201722/149652234559331e69e06ca6.50730001.jpg"></div>
	<div class="text">IMG без ID (клик сработает)<img src="https://i1.wallbox.ru/wallpapers/small/201722/149652234559331e69e06ca6.50730001.jpg"></div>
	<div class="text">IMG с ID (клик сработает)<img src="https://i1.wallbox.ru/wallpapers/small/201722/149652234559331e69e06ca6.50730001.jpg" id="image"></div>
	<div class="text">IMG с Class (клик сработает)<img src="https://i1.wallbox.ru/wallpapers/small/201722/149652234559331e69e06ca6.50730001.jpg" class="image"></div>
	<div class="text">IMG с Class (клик НЕ сработает)<img src="https://i1.wallbox.ru/wallpapers/small/201722/149652234559331e69e06ca6.50730001.jpg" class="image"></div>
	<div class="text">" document.images " (клик сработает)<img src="https://i1.wallbox.ru/wallpapers/small/201722/149652234559331e69e06ca6.50730001.jpg"></div>
</div>

CSS

html, body{margin: 0px 0px 0px 0px; width:  100%;}

.main{
	width: 900px;
	height: 900px;
	background: #ebebeb;
	padding: 10px;
}
.text{
	width: 350px;
	height: 270px;
	background: #607D8B;
	text-align:  center;
	padding: 5px;
	display:  inline-block;
	color:  #fff;
	font-family: Comic Sans MS;
	margin-top: 10px;
}
.text:hover{
	background: #008dd1;
}

img{
	width: 300px;
	height: 180px;
	margin-top: 7px;
	cursor:  pointer;
}

JavaScript

document.getElementById('image').onclick=function(){ alert(); }
document.getElementsByClassName('image')[0].onclick=function(){ alert(); }
document.getElementsByTagName('img')[1].onclick=function(){ alert(); }
document.images[5].onclick=function(){ alert(); }