如何使用輸入字段動態更改寬度和高度？

Question

所以我創建了一個表單，它擁有一個輸入字段，該輸入字段應該總是有一個默認值（10px 寬 10px 高）。 一個輸入字段是高度，第二個是 div 的寬度。 我希望如果有人更改 div.box 對它做出反應的這兩個值。 就像輸入填充了一個 20px 寬度的數字一樣，它應該采用 20px 作為寬度。 這一切都應該在沒有頁面重新加載的情況下發生..

我該如何存檔？

 #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>

代碼筆： 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>