Javascript .map() issue when taking array elements [duplicate]

Question

I originally wrote this code to be preventing input field to submit value lesser than 0:

if (
    inflationArray[2].value < 0 ||
    inflationArray[1].value < 0 ||
    inflationArray[0].value < 0
  ) {
    alert("Can't input negative value");
    return;
  }

And it didn't look like the best possible way to do it so I tried replacing it with this piece of code:

if (inflationArray.map((x) => x.value < 0)) {
    alert("Can't input negative value");
  }

Why is it not the same, did I not understand .map() correctly?
My only conclusion is that it might be because that the second way I wrote is not equal to the first one (If I am correct), but:

if (
    inflationArray[2].value < 0 &&
    inflationArray[1].value < 0 &&
    inflationArray[0].value < 0
  ) {
    alert("Can't input negative value");
    return;
  }

Answer 1

You're looking for either Array.prototype.every() or Array.prototype.some().

This will test that every array-element has a value greater than zero, and return true if so (or false if not):

const check = document.querySelector('button');

check.addEventListener('click', (e) => {
  const inflationArray = [...document.querySelectorAll('input')].map(
      (input) => parseFloat(input.value) || -1
    ),
    check = inflationArray.every((value) => value > 0);
    section = e.currentTarget.closest('section');
  section.classList.toggle('valid', check);
  section.classList.toggle('invalid', !check);

});

*,
::before,
 ::after {
  box-sizing: border-box;
  font: normal 400 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}

section {
  border: 2px solid #000;
  display: grid;
  gap: 1em;
  width: clamp(100px, 50vw, 500px);
  margin-block: 1em;
  margin-inline: auto;
  padding: 0.5em;
}

label {
  display: grid;
  gap: 1em;
  grid-template-columns: max-content 1fr;
}

.valid {
  border-color: lime;
}

.invalid {
  border-color: red;
}

.guidance {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.invalid .guidance {
  opacity: 1;
}

<section>
  <label>Enter value for A: <input type="number" id="a" value="-1"></label>
  <label>Enter value for B: <input type="number" id="b" value="-1"></label>
  <label>Enter value for C: <input type="number" id="c" value="-1"></label>
  <p class="guidance">Please ensure all values are positive.</p>
  <button type="button">Check</button>
</section>

Or, this can test that any of the array-elements hold a value of less-than zero; and return true if any one, or more, does (false if none are below zero):

const check = document.querySelector('button');

check.addEventListener('click', (e) => {
  const inflationArray = [...document.querySelectorAll('input')].map(
      (input) => parseFloat(input.value) || -1
    ),
    check = inflationArray.some((value) => value < 0),
    section = e.currentTarget.closest('section');
  section.classList.toggle('valid', !check);
  section.classList.toggle('invalid', check);

});

*,
::before,
 ::after {
  box-sizing: border-box;
  font: normal 400 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}

section {
  border: 2px solid #000;
  display: grid;
  gap: 1em;
  width: clamp(100px, 50vw, 500px);
  margin-block: 1em;
  margin-inline: auto;
  padding: 0.5em;
}

label {
  display: grid;
  gap: 1em;
  grid-template-columns: max-content 1fr;
}

.valid {
  border-color: lime;
}

.invalid {
  border-color: red;
}

.guidance {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.invalid .guidance {
  opacity: 1;
}

<section>
  <label>Enter value for A: <input type="number" id="a"></label>
  <label>Enter value for B: <input type="number" id="b"></label>
  <label>Enter value for C: <input type="number" id="c"></label>
  <p class="guidance">Please ensure all values are positive.</p>
  <button type="button">Check</button>
</section>

References:

• Array.prototype.every().
• Array.prototype.some().