adding values to an array through an if statement in javascript

Question

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.net/89az7u4n/

p.s.w.g · Accepted Answer · 2019-02-15 17:56:42Z

5

The way you typically write inequalities in mathematics is different from the way we typically write comparisons 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.

answered Feb 15, 2019 at 17:56

p.s.w.g

150k31 gold badges307 silver badges339 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user10957435 · Accepted Answer · 2019-02-15 17:55:43Z

2

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

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

instead?

answered Feb 15, 2019 at 17:55

user10957435

Comments

AndrewL64 · Accepted Answer · 2019-02-15 19:22:57Z

N.B.

You should avoid using inline on* handlers (onclick, onchange, onkeyup, etc) and use event listeners instead.
Change mix="0" to min="0".
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 common 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">

Collectives™ on Stack Overflow

adding values to an array through an if statement in javascript

3 Answers 3

Comments

Comments

N.B.

SOLUTION:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

N.B.

SOLUTION:

Comments

Your Answer

Sign up or log in

Post as a guest

Related