how to select images with JS?-CodePudding

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 !

CodePudding user response：

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" />

CodePudding user response：

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)">

CodePudding user response：

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!