Задача следующая: при нажатии на последнюю картинку (их всего 4) одного класса вывести видео, в противном случае скрыть его. Я попытался это сделать через условие, но почему-то ничего не выходит.
HTML:
<div class="w-100 small row" id="small_thumbs">
<div class="border_img bordered small_img" href="#" style="background: url(https://wp/wp-content/uploads/2021/02/2-1650407-242-1-1.jpg); background-size: 100%; background-position-y: top; background-position-x: center; "></div>
<div class="border_img bordered small_img" href="#" style="background: url(https://wp/wp-content/uploads/2021/02/3-056008-073-1.jpg); background-size: 100%; background-position-y: top; background-position-x: center; "></div>
<div class="border_img bordered small_img" href="#" style="background: url(https://wp/wp-content/uploads/2021/02/2-1650407-006-1.jpg); background-size: 100%; background-position-y: top; background-position-x: center; "></div>
<div class="border_img bordered small_img" href="#" style="background: url(https://wp/wp-content/uploads/2021/02/3-06400440-167-1.jpg); background-size: 100%; background-position-y: top; background-position-x: center; "></div>
</div>
<div class="video_obs">
<!-- здесь фрейм с видео -->
</div>
<script type="text/javascript">
var img = document.getElementById('small_thumbs');
var last_img = document.getElementsByClassName('bordered');
var video = document.getElementsByClassName("video_obs")[0];
video.style.display = "none";
last_img.onclick = function() {
if (last_img === last_img.lastChild)
{video.style.display = "block";}
else {
video.style.display = "none";
}
}
</script>