如何使用输入字段动态更改宽度和高度？

Question

So I've created a form, which posses an Input field, that Input field should always have a default value (10px width 10px height). One input field is for the height the secound for the width for the div. I want that if someone changes on of these two values that the div.box react to it. Like if the input is filled with a number 20px width, it should take 20px as width. This all should happen without a page reload..

How do I archive that?

 #box { width: 100px; height: 100px; background: red; }

 <form> <label for="width">Width</label><br> <input type="number" id="width" name="width"><br> <label for="height">Height</label><br> <input type="number" id="height" name="height"><br> <button type="submit">Submit</button> </form> <div id="box"></div>

Codepen: https://codepen.io/toonytest/pen/poeyywZ

Answer 1

 ['width', 'height'].forEach(dimension => { window[dimension].addEventListener('change', ({target: { value } }) => { box.style[dimension] = value + 'px' }) })

 #box { width: 10px; height: 10px; background: red; }

 <form> <label for="width">Width</label><br> <input type="number" id="width" name="width" value=10><br> <label for="height">Height</label><br> <input type="number" id="height" name="height" value=10><br> <button type="submit">Submit</button> </form> <div id="box"></div>