我是 HTML/CCS/Javascript 的初學者，我正在設計一個如下所示的網站：
我想確保下面顯示的表格始終與數字輸入元素同步。
我有一個這樣的輸入數字元素：
<label for="loansize">Loan Size (USD) (between 500 and 3000):</label>
<input type="number" id="loansize" name="loansize" value="3000" min="500" max="3000">
目前，當用戶單擊頁面上的其他位置時，表格確實會重繪 ，因為我添加了如下代碼：
'<div onChange="processPage();">' ... Render the HTML ... '</div>';
但這并沒有抓住用戶正在更改輸入數字的程序，所以我遇到了這樣的情況：
與上圖相比，底部表格保持不變，即使輸入的數字發生了變化。需要在頁面上的其他位置單擊才能使表格重新同步。
在這種情況下，如何確保重新渲染表（即保持同步）？
uj5u.com熱心網友回復：
而不是使用onChange被認為是不好的做法的行內。您可以使用 修改元素DOM。processPage()這是每次更改貸款輸入中的值時觸發函式的簡單方法。
const loanSize = document.getElementById('loansize');
loanSize.addEventListener('input', processPage);
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
uj5u.com熱心網友回復：
您可以嘗試使用onInput監聽器。
來自MDN：
每次元素的值發生變化時都會觸發輸入事件。這與 change 事件不同，后者僅在提交值時觸發，例如通過按下 enter 鍵、從選項串列中選擇一個值等。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/429128.html
標籤：javascript html
上一篇：模板繼承在go中創建空白頁面