之前我做了一個onchange輸入，有幾個輸入有相同的東西，由 id 呼叫。如何在一行代碼中呼叫多個 id？我試圖這樣寫但失敗了：
function minmax() {
const inp_field = document.querySelectorAll("#input1, #input2, #input3, #input4");
let val = parseFloat(inp_field.value),
min = parseFloat(inp_field.min),
max = parseFloat(inp_field.max);
if (val < min) {
inp_field.value = min;
} else if (val > max) {
inp_field.value = max;
} else {
inp_field.value = val;
}
}<input id="input1" type="text" onchange="minmax()" min="0.01" max="94.99">
<input id="input2" type="text" onchange="minmax()" min="0.1" max="99.99">
<input id="input3" type="text" onchange="minmax()" min="5" max="25">
<input id="input4" type="text" onchange="minmax()" min="1" max="10">uj5u.com熱心網友回復：
假設您想在每個輸入值更改時根據其min/max屬性更新每個輸入值：
- 沒有真正需要這些ID。如果您想對它們進行分組，您可以改用一個類，但在這里我只是按元素名稱獲取輸入。
- 洗掉對行內 JS 的要求，并使用
addEventListener將偵聽器附加到每個輸入。 - 您可以
this在函式中使用（參考單擊元素的背景關系）以使代碼更簡潔。 - 您可以洗掉
this.value = val，因為輸入值已經設定。
const inputs = document.querySelectorAll('input');
inputs.forEach(input => {
input.addEventListener('change', minMax);
});
function minMax() {
const val = parseFloat(this.value);
const min = parseFloat(this.min);
const max = parseFloat(this.max);
if (val < min) this.value = min;
if (val > max) this.value = max;
}<input type="text" min="0.01" max="94.99">
<input type="text" min="0.1" max="99.99">
<input type="text" min="5" max="25">
<input type="text" min="1" max="10">uj5u.com熱心網友回復：
如果您的目標是在其中一個輸入發生變化時保持所有輸入同步，則需要使用forEach. 但是請記住，這querySelectorAll會產生 a NodeList，而不是Array：
function minmax() {
const inp_fields = document.querySelectorAll("#input1, #input2, #input3, #input4");
inp_fields.forEach(inp_field => {
let val = parseFloat(inp_field.value),
min = parseFloat(inp_field.min),
max = parseFloat(inp_field.max);
if (val < min) {
inp_field.value = min;
} else if (val > max) {
inp_field.value = max;
} else {
inp_field.value = val;
}
});
}
只需確保將輸入欄位型別更改為number并設定適當的默認值value（例如，0），否則NaN在修改任何其他欄位時，您的計算將屈服于設定為所有其他欄位。
uj5u.com熱心網友回復：
我懷疑你真的需要所有這些......試試這個，看看它是否滿足你的需要。
function minmax(inp_field) {
let val = parseFloat(inp_field.value),
min = parseFloat(inp_field.min),
max = parseFloat(inp_field.max);
if (val < min) {
inp_field.value = min;
} else if (val > max) {
inp_field.value = max;
} else {
inp_field.value = val;
}
}<input id="input1" type="text" onchange="minmax(this)" min="0.01" max="94.99">
<input id="input2" type="text" onchange="minmax(this)" min="0.1" max="99.99">
<input id="input3" type="text" onchange="minmax(this)" min="5" max="25">
<input id="input4" type="text" onchange="minmax(this)" min="1" max="10">uj5u.com熱心網友回復：
像這樣，ids 可以根據你的代碼改變，像這樣，ids 可以根據你的代碼改變，但邏輯是這樣的
const elements=document.qeuerySelectorAll('#id, #id2,#id3');
elements.foreEach(funcion(element){
console.log(element);
});
uj5u.com熱心網友回復：
當您處理多個元素時，請考慮使用classes 而不是 element s。id而且也是最佳實踐。然后你可以使用類似的功能getElementsByClassName()
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/489631.html
標籤：javascript