我有一個體育博彩計算器，它有幾個輸入欄位，一旦所有欄位都填寫完畢，計算表應顯示在下方。
顯示表格時，應該可以更改輸入欄位；表格也應該實時變化。
HTML： <input type="number" class ="form-control input-lg" id="quoteBack">
JS：document.getElementById("quoteBack").addEventListener("input", function() {});
我目前正在使用 addEventListener“輸入”變體，這只能用于一個欄位。
但是我想檢查所有欄位是否都填寫完畢，然后表格應該出現
uj5u.com熱心網友回復：
嗯，首先，我認為您應該給輸入欄位一個唯一的className，然后我們將檢查具有該 的欄位className。
例如：
<input type="number" class ="form-control input-lg validated-field" id="quoteBack">
我給了它一個名為
validated-field.
然后讓我們使用 JavaScript 檢查這些欄位：
// Get fields by className
var fields = document.getElementsByClassName("validated-field")
// Array.from will convert the HTMLCollection to Native Array.
if (Array.from(fields).length > 0) {
// Loop
Array.from(fields).forEach(field => {
// Add Event for each field.
field.addEventListener("input", function(e) {
console.log(e.target.value)
if (!e.target.value) {
e.target.classList.add("not-valid")
} else {
e.target.classList.remove("not-valid")
}
})
})
}
我只是遍歷欄位并為每個欄位添加一個事件偵聽器。
現場示例：https : //codepen.io/nawafscript/pen/OJjEXrW
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/354022.html
標籤：javascript html 事件 听众