CODEWITHSUNDEEP
javascriptjqueryformsdomelement
Lordvicus Madin
Lordvicus Madin

Reputation: 35

Dynamically manipulate element attributes using input controls?

I would like to use the input controls to manipulate elements dynamically. Either Pure JavaScript or jQuery is fine.

 src="https://www.w3schools.com/css/rock600x400.jpg" >
</br><br>
<form class="button" action="">
Width
<input class="button" type="number" value="300">
Height  
<input class="button" type="number" value="400">
 </form>

The result would be something like this:

Example result

Upvotes: 0

Views: 47

Answers (1)

Miroslav Glamuzina
Miroslav Glamuzina

Reputation: 4577

All you have to do is add some id attributes, get a reference to your elements in JavaScript and update the image style oninput (when the value of the width or height is changed)

let img = document.getElementById('img');
let width = document.getElementById('width');
let height = document.getElementById('height');

changeSize = () => {
  img.style.width = `${width.value}px`;
  img.style.height = `${height.value}px`;
}
<img id="img" src="https://www.w3schools.com/css/rock600x400.jpg" />
</br><br>
<form class="button" action="">
  Width
  <input id="width" class="button" type="number" value="300" oninput="changeSize()"> Height
  <input id="height" class="button" type="number" value="400" oninput="changeSize()">
</form>

Upvotes: 1

Related Questions