Expand image on click doesn't work | SoloLearn: Learn to code for FREE!


Expand image on click doesn't work

I'm trying to expand images on click and found a few solution (except the one I'm looking for). 1) using img:hover {} on css allows to expand the image on hover. 2) using javascript I can expand each picture, but I need a new function for every image, which seems unnecessary to me since I'm making a website containing tons of pictures. 3) using javascript to find out the id of the element clicked and expanding that element, allowing for just 2 functions. I just haven't been able to do that. My code is below, don't mind the way everything looks, it's a quick sketch containing all necessary things I currently use in the original code. In order to make it work smooth I need these steps: - When any image is clicked, the counting function adds 1 - Then the Grow function checks for the id on clicked element -Grow function expands the image - When clicked again, the counting function removes 1 - Then the Grow function checks for the id on clicked element - Grow function restores the original values of the image What do I change to make it work? https://code.sololearn.com/Wa23a2363a23

1/23/2021 3:58:36 PM


2 Answers

New Answer


I edited your code to use Javascript for mapping click event for the images. https://code.sololearn.com/Wkq5KITgUsm0/?ref=app


Basic fix (adding leading dot at css class name, rewrote of js, correct html onclick attribute -- html is case insensitive, but js is, meaning js expect all lowercase "onclick"): https://code.sololearn.com/WWbS6eg1tDYZ/?ref=app