добавление значений в массив с помощью оператора if в JavaScript

Question

Я получаю значения и идентификаторы из формы ввода, используя 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.log("id: ",id);
        console.log("value: ", value);
        console.log("length of array: ",dps.length);
        console.log("type of value: ", typeof value);
    }
 }

Я воссоздал ее на Jsfiddle здесь: https://jsfiddle.net/89az7u4n/

Answer 1

То, как вы обычно пишете неравенства в математике, отличается от того, как мы обычно пишем сравнения в большинстве языков программирования.

if (0 <= value <= 4) не означает «значение от 0 до 4».Синтаксический анализатор обрабатывает это как (0 <= value) <= 4, которое будет либо оцениваться в false <= 4, либо true <= 4, что в обоих случаях оценивается в true.

Измените свой оператор if на следующее:

if (0 <= value && value <= 4) {
  ...
}

Где && - логический оператор И .

Answer 2

NB

1. Следует избегать использования встроенных обработчиков * (onclick, onchange, onkeyup и т. Д.) И использовать вместо них прослушиватели событий.
2. Измените mix="0" на min="0".
3. Вам необходимо использовать && ( И оператор ) в вашем if condition, как показано и объяснено в ответе @ pswg .

---

РЕШЕНИЕ:

Если оба ваших входа находятся рядом друг с другом, просто оберните их внутри общего элемента div и нацелите их обоих, используя querySelectorAll () затем используйте метод forEach () , чтобы добавить прослушиватель 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.log(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>

---

Если ваши входные элементы не находятся рядом друг с другом, просто наведите на них отдельную цель, используя метод getElementById () изатем добавьте слушатель 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.log(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">

Answer 3

Возможно, вам следует разделить ваше условие на два утверждения, например:

if (0 <= value && value <= 4) {

вместо?