how to select images with JS?

Question

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 !

Any particular reason you want to use `document.images` over the alternatives? — Andy, Oct 02 '21 at 05:09
The name of the property says it all: `document.images`, _image**s**_, plural. That is, all the _images_ of the document. Why would _all images_ have _one singular_ style? The answer below gives the subtle hint to do `console.log(document.images);` which is part of basic debugging that you should’ve done before. — Sebastian Simon, Oct 02 '21 at 05:10
Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. Familiarize yourself with the [DOM API](//developer.mozilla.org/docs/Web/API/Document_Object_Model) and with [events](//developer.mozilla.org/docs/Web/Guide/Events). — Sebastian Simon, Oct 02 '21 at 05:13
Use [event delegation](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of assigning multiple event listeners — it’s more maintainable, and applies to dynamically added elements. E.g., use an [event argument](//developer.mozilla.org/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)’s [`target`](//developer.mozilla.org/docs/Web/API/Event/target). See [the tag info](/tags/event-delegation/info) and [What is DOM Event delegation?](/q/1687296/4642212). — Sebastian Simon, Oct 02 '21 at 05:13
Another thing is that `if(num=='300px')` is very fragile. Checking CSS properties directly is [best avoided](/q/55071684/4642212). Instead, a CSS class should be used, e.g. `.large { width: 100%; }`; then [`.classList.contains("large")`](//developer.mozilla.org/docs/Web/API/Element/classList) to check for its existence, `.classList.toggle("large")`, etc. Consider using the [`` element](//developer.mozilla.org/docs/Web/HTML/Element/picture), too. — Sebastian Simon, Oct 02 '21 at 05:16

score 1 · Answer 1 · answered Oct 02 '21 at 05:46

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

DecPK · Answer 2 · 2021-10-02T05:30:53.290

0

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

edited Oct 02 '21 at 05:30

answered Oct 02 '21 at 05:00

DecPK

24,537
6
26
42

yes it's work but now I'm facing one another problem. – Nishant Oct 02 '21 at 05:10
You can ask another question on stackoverflow. If you ask here It would be helpful for you but not everyone because there might be many other developers that may face same problems. Hope you understand – DecPK Oct 02 '21 at 05:13
yeah but still I have to wait for 1day, how about update my queston? – Nishant Oct 02 '21 at 05:17
Sounds good. If there is no option then you have update here – DecPK Oct 02 '21 at 05:18
@decpk Please don’t pity-upvote. – Sebastian Simon Oct 02 '21 at 05:18
1

@Nishant Before asking or updating anything, please try following all the advice you’re given. It sounds like you’re looking for listening for multiple click event targets and adjusting their styles. Use event delegation and the `classList` API. – Sebastian Simon Oct 02 '21 at 05:20
Here is my updated question! – Nishant Oct 02 '21 at 05:26
Answer updated. Have a look – DecPK Oct 02 '21 at 05:31
@decpk I want something like this bro: I want to increase size of a single images not all at once. like if user clicked at image first so image first increase if user click at image2 so image 2 incresed. – Nishant Oct 02 '21 at 08:47

Coder_Naveed · Answer 3 · 2021-10-03T06:51:29.000

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!

yeah something like this but I want to increase size of a single images not all at once. like if user clicked at image first so image first increase if user click at image2 so image 2 incresed. — Nishant, Oct 02 '21 at 08:46

how to select images with JS?

3 Answers3