我正在制作網站以使桌面游戲計算更容易。所以,如果簡化,我有一個這樣的形式:
<input id="x"/>
<input id="y"/>
我想實時收集這種形式的資料并立即像這樣處理它們:
<span id="x-plus-y"/>在 html 和document.getElementById('x-plus-y').innerHTML = x*yjs 中
它非常簡化,但我認為你明白了。
我的問題是如何在用戶將值輸入到輸入欄位時立即處理 x y。
uj5u.com熱心網友回復:
這是您可以通過的簡單方法。我在每個輸入上附加了一個 keyup 事件偵聽器,然后呼叫 updateResult 函式來計算產品并將其顯示在結果 div 中。
HTML
Number 1 : <input type="number">
<br><br>
Number 2 : <input type="number">
<br><br>
<div id="result">
</div>
JS
const inputs = Array.from(document.querySelectorAll("input"));
const resultDiv = document.querySelector("div");
const numbers = [];
for(const input of inputs) {
input.addEventListener('keyup', updateResult);
}
function updateResult() {
let product = 1;
for(const input of inputs) {
product*= parseInt(input.value,10);
}
if(!isNaN(product)) {
resultDiv.innerHTML = "Product: " product;
}
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/373575.html
標籤:javascript html 形式
上一篇:表單占位符文本上的懸停效果
下一篇:xxx.value和xxx.options[xxx.selectedIndex].value有什么區別,用JavaScript獲取所選選項的值?
