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

April 16, 2022

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? 🙂

>Solution :

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>