I have two Images here and I want to show larger when Image clicked but it's only increase size of Image1 because of document.image[0] but how to create this for multiple image.
Note : I did this using document.getElementById('#').style.width; and it's works but is it possible to do this using document.images?
function iw(){
var num = document.images[0].style.width;
if (num == '300px') {
document.images[0].style.width='500px'
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="https://cdn-prod.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg" style="width:300px;" onclick="iw()">
<img src="https://cdn-prod.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg" style="width:300px;" onclick="iw()">
</body>
</html>Thank You to help me !
Here's an example that uses some of the suggestions from @SebastianSimon.
Event delegation.
CSS classes and classList.
We attach one listener to the document body, and then check the nodeName of the clicked element. If it's an image and the classList contains a specific class, replace that class with another. In this case we're replacing "large" with "small".
document.body.addEventListener('click', handleClick, false);
function handleClick(e) {
const { nodeName, classList } = e.target;
if (nodeName === 'IMG') {
if (classList.contains('large')) {
classList.replace('large', 'small');
}
}
}.small { height: 100px; width: 50px; background-image: url('https://dummyimage.com/50x100/aa7777'); }
.medium { height: 100px; width: 100px; background-image: url('https://dummyimage.com/100x100/77aa77/000'); }
.large { height: 100px; width: 300px; background-image: url('https://dummyimage.com/300x100/7777aa/000'); }<img class="medium" />
<img class="large" />
<img class="medium" />
<img class="small" />
<img class="small" />
<img class="large" />document.images will give you an array like HTMLCollection
You have to select the image using index to access the image
var num = document.images[0].style.width;
console.log(document.images);
function iw() {
var num = document.images[0].style.width;
if (num == '300px') {
alert('Image clicked');
}
}<img src="https://cdn-prod.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg" style="width:300px;" onclick="iw()">If there are multiple images then you can pass the reference to function and then access the element and do as required
function iw(el) {
var num = el.style.width;
if ( num == '300px' ) {
alert( 'Image clicked' );
}
}<img src="https://cdn-prod.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg" style="width:300px;" onclick="iw(this)">
<img src="https://cdn-prod.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg" style="width:300px;" onclick="iw(this)">I guess you want to change size of all the images when one image is clicked, so use the javascript selector function getElementsByTagName
var images = document.getElementsByTagName("img");
function enlarge() {
for(let i = 0; i < images.length; ++i) {
images[i].width = 200;
}
}<img src="https://wallpaperaccess.com/full/211818.jpg" onclick="enlarge()" width=100>
<img src="https://i.pinimg.com/originals/cc/18/8c/cc188c604e58cffd36e1d183c7198d21.jpg" onclick="enlarge()" width=100>run the snippet and try it! if you find any defect please comment, but it worked!๐
Edit :-
you have asked to change the size of only on image, try this, it is simple
var images = document.getElementsByTagName("img");
function enlarge(el) {
el.width = 200;
}<img src="https://wallpaperaccess.com/full/211818.jpg" onclick="enlarge(this)" width=100>
<img src="https://i.pinimg.com/originals/cc/18/8c/cc188c604e58cffd36e1d183c7198d21.jpg" onclick="enlarge(this)" width=100>that's all! if you find any problems again please comment!๐