How to increase or decrease images size with new values using input text?

Question

I need to change images size all at once when I enter new values in to Input text, nothing is working for me... I see a lot of similar posts, but again, nothing works:)

Html-

 function increaseSize( img, input ) { var myImg = document.getElementById("gr"); var input = document.getElementById("input-width"); var input = document.getElementById("input-height"); img.style.width = input.value + "px"; img.style.height = input.value + "px"; } // enter code here increaseSize( "myImg" );

 <div class="grupe" id="gr"> <img src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg" alt=MiskoUpe style="width:170px;height: 120px;margin: 0px 40px;"> <img src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=" alt=Kalnai style="width:180px;height: 122px; margin: 0px 40px;"> <img src="https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Zugpsitze_mountain.jpg?crop=0,176,3008,1654&wid=4000&hei=2200&scl=0.752" alt=KalnaiIrEzeras style="width:190px;height: 120px; margin: 0px 40px;"> <img src="https://images.assettype.com/fortuneindia%2F2020-06%2Fef53f9be-f257-4aa3-9af5-6ca1a9f33a86%2Fclose_up_photography_of_leaves_with_droplets_807598.jpg?rect=0,607,4128,2322&w=1250&q=60" alt=Lapai style="width:170px;height: 120px; margin: 0px 40px;"> </div> <div class="resizeImage"> <h><b>Gallery</b></h> <br> <br> <label for="plotis"> width: </label> <input type="text" value="1" id="input-width"/> <br> <br> <label for="Aukstis"> height: </label> <input type="text" value="1" id="input-height" /> <br>`enter code here` <br> <button type="button" value="Change" onclick="increaseSize()">Change</button><br> </div>

Can anyone help? :)

Answer 1

Try this

 function increaseSize( ) { var myImgs = document.getElementById("gr"); var width = document.getElementById("input-width").value; var height = document.getElementById("input-height").value; myImgs.querySelectorAll('img').forEach(img => { img.style.width = width + "px"; img.style.height = height + "px"; }) }

 <div class="grupe" id="gr"> <img src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg" alt=MiskoUpe style="width:170px;height: 120px;margin: 0px 40px;"> <img src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=" alt=Kalnai style="width:180px;height: 122px; margin: 0px 40px;"> <img src="https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Zugpsitze_mountain.jpg?crop=0,176,3008,1654&wid=4000&hei=2200&scl=0.752" alt=KalnaiIrEzeras style="width:190px;height: 120px; margin: 0px 40px;"> <img src="https://images.assettype.com/fortuneindia%2F2020-06%2Fef53f9be-f257-4aa3-9af5-6ca1a9f33a86%2Fclose_up_photography_of_leaves_with_droplets_807598.jpg?rect=0,607,4128,2322&w=1250&q=60" alt=Lapai style="width:170px;height: 120px; margin: 0px 40px;"> </div> <div class="resizeImage"> <h><b>Gallery</b></h> <br> <br> <label for="plotis"> width: </label> <input type="text" value="1" id="input-width"/> <br> <br> <label for="Aukstis"> height: </label> <input type="text" value="1" id="input-height" /> <br>`enter code here` <br> <button type="button" value="Change" onclick="increaseSize()">Change</button><br> </div>