How to add class in images and when click any image then the image change his width and height and all other images invisible ?

Question

I have a image gallery which source code is in html. I want to add same class to all images and using click function so that whenever i click any image it change his width and height to full vw and full vh. And i want all other images display "none" except that one which i click. Now, the question is how i can do it with JavaScript ?

Answer 1

When we set onclick event we get event object, with this object you can access clicked element with: event.target
this will select clicked input, than you can do anything you wish.
You may set all img(classes) to none, and just this clicked to block and change width and height.

Here is more about event.target:
https://developer.mozilla.org/en-US/docs/Web/API/Event/target

Answer 2

You can toggle the presence of the class by using element's classList,toggle() method. Further about it, refer the docs ...

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

https://www.w3schools.com/jsref/prop_element_classlist.asp