There are reviews <div class="recall"> there is a picture in them, and clicking on it, the picture should increase. I know how to do this with id , but the problem is complicated by the fact that as a result, people far from html should add reviews, and we need to make a universal way so that when you click on the picture, an enlarged version of it appears. As I understand it, you need to get the src value of the current image and substitute this value into the style or attribute. Below is the code that came out.

 <main> <script type="text/javascript"> function showimg() { var getImageName = function() { document.onclick = function(e) { if (e.target.tagName == 'IMG') { var curimg = toString(e.target.getAttribute("src")); } } } getImageName() document.getElementById('current-recall-img').style.backgroundImage = "url('" + curimg + "')"; document.getElementById('current-recall-img').style.border = '1px solid red'; document.getElementById('current-recall-img').style.width = '100px'; document.getElementById('current-recall-img').style.height = '100px'; var f = document.getElementById( bId ); if ( f.style.display == 'none' ) { f.style.display = 'block'; } else { f.style.display = 'none'; } }; </script> <div class="recall"> <img alt="" class="img" src="img/img1.png" onclick="showimg( bId='recall-img')" /> <div class="comment">Комментарий</div> <div class="date">25.05.16</div> <div class="master">Ирина</div> <div class="salon">Таганка</div> </div> <div class="recall"> <img alt="" class="img" src="img/img2.png" onclick="showimg( bId='recall-img')" /> <div class="comment">Комментарий</div> <div class="date">25.05.16</div> <div class="master">Ирина</div> <div class="salon">Таганка</div> </div> <div class="recall"> <img alt="" class="img" src="img/img3.png" onclick="showimg( bId='recall-img')" /> <div class="comment">Комментарий</div> <div class="date">25.05.16</div> <div class="master">Ирина</div> <div class="salon">Таганка</div> </div> <div class="shadow" id="recall-img" style="display: none;"> <div id="current-recall-img" onclick="showimg( bId='recall-img' )" /></div> </div> </main>
  • "Clicking on it, the picture should increase" - quote more precisely: "Driving up to this station ..., my hat flew off." - Igor
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

If I understood everything correctly, the result should be something like this:

 var imageList = document.querySelectorAll('.recall > img'); var i = imageList.length; while (i--) { imageList[i].addEventListener('click', showimg); } function showimg(e) { var imgSrc = null; if (e.target.tagName == 'IMG') { imgSrc = e.target.src } var preview = document.getElementById('preview'); var currentImage = document.getElementById('current-recall-img'); preview.style.display = 'block'; currentImage.src = imgSrc; }; 
 #current-recall-img img { width: 100%; } .recall img { width: 200px; } 
 <main> <div class="recall"> <img alt="" class="img" src="http://bart.com.ua/wp-content/uploads/2015/03/gradina-1333657576.jpg" /> <div class="comment">Комментарий</div> <div class="date">25.05.16</div> <div class="master">Ирина</div> <div class="salon">Таганка</div> </div> <div class="recall"> <img alt="" class="img" src="http://zonahelp.ru/wp-content/uploads/2013/05/44.jpg" /> <div class="comment">Комментарий</div> <div class="date">25.05.16</div> <div class="master">Ирина</div> <div class="salon">Таганка</div> </div> <div class="recall"> <img alt="" class="img" src="http://bart.com.ua/wp-content/uploads/2015/03/gradina-1333657576.jpg" /> <div class="comment">Комментарий</div> <div class="date">25.05.16</div> <div class="master">Ирина</div> <div class="salon">Таганка</div> </div> <div id="preview" style="position: absolute; right: 0;top:0; width: 400px; height: 400px;border: 1px solid red; display: none;"> <img id="current-recall-img" /> </div> </main>

  • one
    Yes, that's what I need. Thank you very much. Could you explain to me why I didn’t work? - Andrey Svezhintsev
  • You have a lot of shortcomings there, the main variable is curimg , which is declared inside the function, but is not returned anywhere, and the function for reassignment is not declared above - Vasily Barbashev