Necesito cambiar el tamaño de las imágenes de una vez cuando ingreso nuevos valores en el texto de entrada, nada funciona para mí... Veo muchas publicaciones similares, pero nuevamente, nada funciona :)
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>¿Alguien puede ayudar? :)
Prueba esto
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>