我寫了一個小腳本來檢查 3<input>的實時值屬性，如果實時值高于或低于 max 或 min 屬性，則應更正它們。但是，一旦通過鍵盤輸入數字，腳本也會將值更改為最大值。
經過幾個小時的測驗，我仍然無法弄清楚為什么即使輸入的實時值低于最大屬性并將其設定為最大值，if 陳述句也總是觸發。
document.querySelectorAll('input').forEach(inputListener => {
inputListener.addEventListener('change', function() {
//correct inputs if invalid values have been entered
let active_input = ['#input-cage-width', '#input-cage-depth', '#input-bedding-data-height'];
for (let i = 0; i < active_input.length; i ) {
let value_input = document.querySelector(active_input[i]).value,
min_input = document.querySelector(active_input[i]).min,
max_input = document.querySelector(active_input[i]).max,
element = document.querySelector(active_input[i]);
if (value_input < min_input) {
element.value = min_input;
}
if (value_input > max_input) {
element.value = max_input;
}
}
});
});<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
</head>
<body>
<input type="number"
id="input-cage-width"
value="100"
min="10"
max="200">
<input type="number"
id="input-cage-depth"
value="50"
min="10"
max="100">
<input type="number"
id="input-bedding-data-height"
value="25"
min="1"
max="100">
</body>uj5u.com熱心網友回復：
因為您正在處理字串，所以比較是字串比較。
例如'55' > '200'，當我們期望它回傳 false 時回傳 true。
要解決此問題，請通過在每個值前面添加來替換像這樣設定最小值/最大值和值的行。
let value_input = document.querySelector(active_input[i]).value,
min_input = document.querySelector(active_input[i]).min,
max_input = document.querySelector(active_input[i]).max,
element = document.querySelector(active_input[i]);
將 嘗試將字串轉換為數字。
當您在文本框中輸入一個值時，該值String不是 a Number，因此比較不是我們所期望的。
因此，例如，當您在框中輸入 55 時，實際上是'55'（帶引號，表示字串）。最大值/最小值相同。
要看到這一點，您可以簡單地運行if('55' > '200') console.log('55 larger than 200!!');它，它實際上會顯示這一點。
這與if('b' > 'a') console.log('blarger than a!!');
另一方面，嘗試if( '55' > '200') console.log('55 larger than 200!!');（注意 ）。這不會輸出任何內容，因為 Number(55) 不大于 Number(200)。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/497959.html
標籤：javascript html