0

I have list of images like this

<p><img id="image" src="001.jpg" height="1000"></img></p> 
<p><img id="image" src="002.jpg" height="1000"></img></p> 
<p><img id="image" src="003.jpg" height="1000"></img></p> 


<button onclick="plus()">+</button>
<button onclick="minus()">-</button>

I tried using this script, to increase or decrease all of my images height with a button, but its only increase/decrease the first image

function plus() {document.getElementById("image").height+=50;}
function minus() {document.getElementById("image").height-=50;}

Why's it only increase/decrease the first image and how to make it work on all images??

Rizal
  • 1
  • 1
  • `document.getElementById("image").style.height+=50 + "px";` Also, `img` elements don't get a closing tag (i.e., `` doesn't exist.) – Scott Marcus Jun 22 '22 at 16:56
  • In summary, you cannot have more than an element with the same id on a web page. It is not allowed by design. Browsers are tolerant but their behaviour is not consistent. Switch to class names and use querySelectorAll to select them (the suggested alternatives will prove useful on this topic). – Eineki Jun 22 '22 at 17:03
  • Thank you, it's been solved. This [document.getElementById() only operated on one element](https://stackoverflow.com/questions/66695015/document-getelementbyid-only-operated-on-one-element) and this [What do querySelectorAll and getElementsBy* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) answers my question – Rizal Jun 22 '22 at 17:20

0 Answers0