These values aren't comparing in this function (vanilla javascript)

Question

I know the answer to this is probably really simple, as it's only a simple number guessing game. For whatever reason the comparison between "num1" and "num2" in the function and the code that follows doesn't execute.

Notably, the 2nd condition in the function works and I believe this is because they don't involve the first two arguments.

I also know it is easier to monitor the amount of guesses with a counter but I want to use the array for now. Unless the array is causing the problem then I'll remove it

let randomNumber = Math.floor(Math.random() * 100);

console.log(randomNumber);

const numberArr = [];

const sub1 = document.getElementById("sub1");

const numberGuessingGame = (num1, num2, arr) => {
  if (num1 === num2) {
    arr.splice(0, 3);
    randomNumber = Math.floor(Math.random() * 100);
    return alert(`Congratulations ${num1} is correct!`);
  } else if (arr.length === 3) {
    arr.splice(0, 3);
    console.log(randomNumber = Math.floor(Math.random() * 100));
    return alert("You've guessed three times, start over")
  } else if (!num1 === num2) {
    return alert("Try again");
  };
};

sub1.addEventListener("click", e => {
  const values = document.getElementById("number").value;
  numberArr.push(values);
  console.log(values);
  numberGuessingGame(values, randomNumber, numberArr);
  e.preventDefault();
  form1.reset();
});

<form id="form1">
  <div class="row w-100 d-flex justify-content-between div1">
    <div class="col-12 d-flex justify-content-center">
      <input type="number" name="number" id="number" min="0" max="100">
    </div>
    <div class="col-12 d-flex justify-content-center">
      <button type="submit" form="form1" id="sub1">Submit</button>
    </div>
  </div>
</form>

Answer 1

The problem is that you are comparing a string with a number.

With value you query a string:

document.getElementById("number").value

Therefore, you must first convert the string into a number:

parseInt(document.getElementById("number").value)

Alternatively, you could make the comparison less restrictive and use type coercion (double equals, not triple equals):

if (num1 == num2)

Working example:

let randomNumber = Math.floor(Math.random() * 100);

console.log(randomNumber);

const numberArr = [];

const sub1 = document.getElementById("sub1");

const numberGuessingGame = (num1, num2, arr) => {
  if (num1 === num2) {
    arr.splice(0, 3);
    randomNumber = Math.floor(Math.random() * 100);
    return alert(`Congratulations ${num1} is correct!`);
  } else if (arr.length === 3) {
    arr.splice(0, 3);
    console.log(randomNumber = Math.floor(Math.random() * 100));
    return alert("You've guessed three times, start over")
  } else if (!num1 === num2) {
    return alert("Try again");
  };
};

sub1.addEventListener("click", e => {
  const values = parseInt(document.getElementById("number").value);
  numberArr.push(values);
  console.log(values);
  numberGuessingGame(values, randomNumber, numberArr);
  e.preventDefault();
  form1.reset();
});

<form id="form1">
  <div class="row w-100 d-flex justify-content-between div1">
    <div class="col-12 d-flex justify-content-center">
      <input type="number" name="number" id="number" min="0" max="100">
    </div>
    <div class="col-12 d-flex justify-content-center">
      <button type="submit" form="form1" id="sub1">Submit</button>
    </div>
  </div>
</form>

Please note that your code contains a lot more bugs. For example, if the number is wrong, no alert is displayed because the following comparison is incorrect:

else if (!num1 === num2)

I have completely corrected your solution so that the game now works correctly. Please compare the two solutions and check if the differences are clear to you. If you have any further questions, feel free to post a comment.

const submitButton = document.getElementById('sub1');
const form = document.getElementById('form1');
let numberArray = [];
let randomNumber = generateRandomNumber();

function generateRandomNumber() {
  const number = Math.floor(Math.random() * 100);
  console.log(number);
  return number;
}

function checkInput(value) {
  if (value == randomNumber) {
    numberArray = [];
    randomNumber = generateRandomNumber();
    alert(`Congratulations ${value} is correct!`);
  } else if (numberArray.length >= 3) {
    numberArray = [];
    randomNumber = generateRandomNumber();
    alert(`You've guessed three times, start over`);
  } else {
    alert(`Try again`);
  }
}

submitButton.addEventListener('click', e => {
  e.preventDefault();
  const value = document.getElementById('number').value;
  console.log(value);
  numberArray.push(value);
  checkInput(value);
  form.reset();
});

<form id="form1">
  <div class="row w-100 d-flex justify-content-between div1">
    <div class="col-12 d-flex justify-content-center">
      <input type="number" name="number" id="number" min="0" max="100">
    </div>
    <div class="col-12 d-flex justify-content-center">
      <button type="submit" form="form1" id="sub1">Submit</button>
    </div>
  </div>
</form>

Answer 2

1. You need to convert your textual value from the input control to an integer.

2. Your test for inequality was flawed. You had else if (!num1 === num2) instead of else if (num1 !== num2)

See //**** for changes

let randomNumber = Math.floor(Math.random() * 100);

console.log(randomNumber);

const numberArr = [];

const sub1 = document.getElementById("sub1");

const numberGuessingGame = (num1, num2, arr) => {
  if (num1 === num2) {
    arr.splice(0, 3);
    randomNumber = Math.floor(Math.random() * 100);
    return alert(`Congratulations ${num1} is correct!`);
  } else if (arr.length === 3) {
    arr.splice(0, 3);
    console.log(randomNumber = Math.floor(Math.random() * 100));
    return alert("You've guessed three times, start over")
  } else if (num1 !== num2) { //****
    return alert("Try again");
  };
};

sub1.addEventListener("click", e => {
  const values = parseInt(document.getElementById("number").value); //****
  numberArr.push(values);
  console.log(values);
  numberGuessingGame(values, randomNumber, numberArr);
  e.preventDefault();
  form1.reset();
});

<form id="form1">
  <div class="row w-100 d-flex justify-content-between div1">
    <div class="col-12 d-flex justify-content-center">
      <input type="number" name="number" id="number" min="0" max="100">
    </div>
    <div class="col-12 d-flex justify-content-center">
      <button type="submit" form="form1" id="sub1">Submit</button>
    </div>
  </div>
</form>

Answer 3

Try making sure num1 and num2 are integers, or try:

if (num1 == num2) {

Also you probably want

    } else if (num1 != num2) {
        return alert("Try again"); 

in the third logical condition.