I get values and ids from a form input using onkeyup(). If the value is between 0 and 4 I want to add it to an array. However it seems my function adds values to the array regardless if they are between 0 and 4 eventhough I want it to add values to the array only when the value is between 0 and 4. What am I doing wrong?

These are the inputs:

<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">
.
.

This is my function:

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);
    }
 }

I have recreated it on Jsfiddle here: /

I get values and ids from a form input using onkeyup(). If the value is between 0 and 4 I want to add it to an array. However it seems my function adds values to the array regardless if they are between 0 and 4 eventhough I want it to add values to the array only when the value is between 0 and 4. What am I doing wrong?

These are the inputs:

<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">
.
.

This is my function:

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);
    }
 }

I have recreated it on Jsfiddle here: https://jsfiddle/89az7u4n/

• javascript
• html
• arrays
• forms
• if-statement

Share Follow asked Feb 15, 2019 at 17:52 MoeMoe 6711 gold badge11 silver badge1010 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

The way you typically write inequalities in mathematics is different from the way we typically write parisons in most programming languages.

if (0 <= value <= 4) doesn't mean 'if the value is between 0 and 4'. The parser treats this as (0 <= value) <= 4 which will either evaluate to false <= 4 or true <= 4 which both evaluate to true.

Change your if statement to this:

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

Where && is the logical AND operator.

Perhaps you should split your condition into two statements like this:

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

instead?

N.B.

1. You should avoid using inline on* handlers (onclick, onchange, onkeyup, etc) and use event listeners instead.
2. Change mix="0" to min="0".
3. You need to use the && (AND operator) in your if condition as shown and explained in @p.s.w.g's answer.

---

SOLUTION:

If both your inputs are kept next to each other, just wrap them inside a mon div and target them both using the querySelectorAll() method and then use the forEach() method to add a keyup listener to both the inputs that will run a function checking the input values when the event is invoked.

---

Check and run the following Code Snippet for a practical example of what I have described above:

/* 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>

---

If your input elements are not kept next to each other, just target them separately using the getElementById() method and then add a keyup listener to both the inputs that will run a function checking the input values when the event is invoked.

Check and run the following Code Snippet for a practical example of what I have described above:

/* 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">