If target value item is in array

Question

I have a selection of properties with the div id of property_id that passes an id value. I have an event listener that triggers when a user selects a property. I want to create a conditional that checks if the property selection is in the array.

document.getElementById('property_id').addEventListener('change', function (e) {
 var array = [1, 17, 20, 23, 87]
 var propertySelection = e.target.value;
 if (array.includes(propertySelection)) {
   //do stuff
 }
});

Doing console.log(propertySelection) provides the correct number when selecting properties (ie. 17, 2, 20 etc), but doing console.log(array.includes(propertySelection)) outputs false on all accounts. Why is this?

`e.target.value` is a string, you need a number - convert it by doing `Number(e.target.value)` — VLAZ, Jul 16 '20 at 07:36
Or use this shortcut: `var propertySelection = +e.target.value;` — , Jul 16 '20 at 07:38
Ah. Spot on @VLAZ If you want to create the answer I can accept it. — DollarChills, Jul 16 '20 at 07:44

VLAZ · Accepted Answer · 2023-04-03T13:14:29.053

The issue is that input values from the page are always returned as strings:

const val = document.getElementById('property_id').value;

console.log(val, typeof val)

<input type="number" value=20 id="property_id" />

Which then means that when using Array#includes() on an array of numbers, no match can be found:

var array = [1, 17, 20, 23, 87];
var propertySelection = "20";

console.log(array.includes(propertySelection));

Instead, the most direct way to get a numeric value from an input is using .valueAsNumber

document.getElementById('property_id').addEventListener('change', function(e) {
  var array = [1, 17, 20, 23, 87]
  var propertySelection = e.target.valueAsNumber;
  // get numeric value directly    ^^^^^^^^^^^^^
  if (array.includes(propertySelection)) {
    console.log("do stuff");
  } else {
    console.log("don't do anything");
  }
});

<input type="number" id="property_id" />

Alternative is using Number as a function to convert a string value to a number:

document.getElementById('property_id').addEventListener('change', function(e) {
  var array = [1, 17, 20, 23, 87]
  var propertySelection = Number(e.target.value);
  // convert to number    ^^^^^^^              ^
  if (array.includes(propertySelection)) {
    console.log("do stuff");
  } else {
    console.log("don't do anything");
  }
});

<input type="number" id="property_id" />

For completeness, the you can also

a unary plus which is exactly the same as calling Number.
parseFloat which will do basically the same however parseFloat("123.4abc") is 123.4 while Number("123.4abc") and +"123.4abc" would return NaN
parseInt if you prefer only integers.

If target value item is in array

1 Answers1