Добавление значений в массив через оператор if в javascript
Я получаю значения и идентификаторы из ввода формы, используя onkeyup(). Если значение находится между 0 и 4, я хочу добавить его в массив. Однако кажется, что моя функция добавляет значения в массив независимо от того, находятся ли они в диапазоне от 0 до 4, хотя я хочу, чтобы она добавляла значения в массив только тогда, когда значение находится в диапазоне от 0 до 4. Что я делаю неправильно?
Это входы:
<input type = "number" class = "form-control" id=0 onkeyup = "a(this)" mix = "0" max = "4">
<input type = "number" class = "form-control" id=1 onkeyup = "a(this)" mix = "0" max = "4">
.
.
Это моя функция:
function a(c){
var dps = [];
var id = c.id;
var valueStr = c.value;
var value = parseInt(valueStr)
if (0 <= value <= 4) {
dps[id]=value;
console.info("id: ",id);
console.info("value: ", value);
console.info("length of array: ",dps.length);
console.info("type of value: ", typeof value);
}
}
Я воссоздал его на Jsfiddle здесь: https://jsfiddle.net/89az7u4n/
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Возможно, вам следует разделить свое условие на два утверждения, например:
if (0 <= value && value <= 4) {
вместо?
То, как вы обычно пишете неравенства в математике, отличается от того, как мы обычно пишем сравнения в большинстве языков программирования.
if (0 <= value <= 4) не означает «если значение находится в диапазоне от 0 до 4». Синтаксический анализатор обрабатывает это как (0 <= value) <= 4, которое либо оценивается как false <= 4, либо true <= 4, которое оба оцениваются как true.
Измените свое утверждение if на это:
if (0 <= value && value <= 4) {
...
}
Где && — оператор логическое И.
Н.Б.
- Вам следует избегать использования встроенных обработчиков on* (onclick, onchange, onkeyup и т. д.) и вместо этого использовать прослушиватели событий.
- Замените
mix = "0"наmin = "0". - Вам нужно использовать
&&(И оператор) в своемif condition, как показано и объяснено в ответе @p.s.w.g.
РЕШЕНИЕ:
Если оба ваших входа хранятся рядом друг с другом, просто оберните их внутри общего div и нацельте их обоих с помощью метода ЗапросСелекторВсе(), а затем используйте метод для каждого(), чтобы добавить прослушиватель keyup к обоим входам, который будет запускать функцию, проверяющую входные значения. при вызове события.
Проверьте и запустите следующий Фрагмент кода для практического примера того, что я описал выше:
/* JavaScript */
const inputVal = document.querySelectorAll("#someDiv input");
let dps = [];
inputVal.forEach(input => input.addEventListener("keyup", function(){
let value = parseInt(input.value);
if (value >= 0 && value <= 4){
dps[input.id] = value;
console.info(dps);
}
}));<!-- HTML -->
<div id = "someDiv">
<input type = "number" class = "form-control" id = "0" min = "0" max = "4">
<input type = "number" class = "form-control" id = "1" min = "0" max = "4">
</div>Если ваши элементы ввода не хранятся рядом друг с другом, просто выберите их отдельно, используя метод получитьэлемент по идентификатору(), а затем добавьте прослушиватель keyup к обоим входам, который будет запускать функцию, проверяющую входные значения при вызове события.
Проверьте и запустите следующий Фрагмент кода для практического примера того, что я описал выше:
/* JavaScript */
const inputVal1 = document.getElementById("0");
const inputVal2 = document.getElementById("1");
let dps = [];
function checkVal(){
let value = parseInt(this.value);
if (value >= 0 && value <= 4){
dps[this.id] = value;
console.info(dps);
}
}
inputVal1.addEventListener("keyup", checkVal);
inputVal2.addEventListener("keyup", checkVal);<!-- HTML -->
<input type = "number" class = "form-control" id = "0" min = "0" max = "4">
<div>ABCD</div>
<input type = "number" class = "form-control" id = "1" min = "0" max = "4">