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? :)
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>