Loop error in Javascript: code ignores conditionals

I'm new to javascript, and I was creating a prime number identifier. However, regardless of the number I put it identifies as a prime. I don't know what is wrong in the code.


let primo = (number) => {
    const numero = document.getElementById('numero').value;
    const resultado = document.getElementById('resultado');
    for(n = 2; n < number; n++) {
    if(number % n === 0) {
    resultado.textContent = 'Esse número não é primo.'; // "This number is not prime"
    } }  
    resultado.textContent = 'Esse número é primo.'; // "This number is prime"
}

 
calcular.addEventListener('click', primo);
<div class="input">
                <label>Número:</label>
                <input type="number" id='numero'>

                <button id='calcular'>É primo?</button>

                <div class="result" id='resultado'></div>

            </div>

Let's indent the code properly:

let primo = (number) => {
    const numero = document.getElementById('numero').value;
    const resultado = document.getElementById('resultado');
    for (n = 2; n < number; n++) {
      if (number % n === 0) {
        resultado.textContent = 'Esse número não é primo.'; // "This number is not prime"
      }
    } 
    resultado.textContent = 'Esse número é primo.'; // "This number is prime"
}

I hope that it is clear for you that, no matter the value of number, the last statement that executes is resultado.textContent = 'Esse número é primo.' (after the loop ends).
It sets the value that you see in the page and overwrites any value that could have been set there during the loop.

In order to fix the error the function must return as soon as the number has been detected to be non-prime (inside the if block).

Another problem in the code is that the function expects an argument (number) but it is called with an argument that is not what it expects (the event). The function also gets a value from the form (numero) but it ignores it. Given the way you install it as an event handler and the rest of its code I think it should use the value of numero instead of number.

let primo = () => {
    const number = document.getElementById('numero').value;
    const resultado = document.getElementById('resultado');
    for (n = 2; n < number; n++) {
      if (number % n === 0) {
        resultado.textContent = 'Esse número não é primo.'; // "This number is not prime";
        return;
      }
    } 
    resultado.textContent = 'Esse número é primo.'; // "This number is prime"
}

There are further improvements that you can apply to your code.

First of all, decouple the logic from the UI. Instead of manipulating the document from the function let the function do only the computation and move the code that works with the document in a separate function:

function primo(number) {
  for (let n = 2; n < number; n++) {
    if (number % n === 0) {
      return false;          // not prime
    }
  }

  return true;               // prime
}


function checkIfPrime() {
  // Get the value to check; expect the string to be a number represented in base 10
  const numero = parseInt(document.getElementById('numero').value, 10);
  const resultado = document.getElementById('resultado');

  // Check if the number is prime and prepare the message accordingly
  let message; 
  if (prime(numero)) {
    message = 'Esse número é primo.';
  } else {
    message = 'Esse número não é primo.';
  }

  // Put the message on screen
  resultado.textContent = message;
}

calcular.addEventListener('click', checkIfPrime);

This way the function primo() can be reused in other pages or in other contexts (where a form is not present).

Then, as @jsnoob suggests in a comment, there is no need to check all the values to number but you can stop earlier. Not on number/2 but on sqrt(number). And this makes the code run much faster for big values of number:

function primo(number) {
  for (let n = 2; n <= Math.floor(Math.sqrt(number)); n++) {
    if (number % n === 0) {
      return false;          // not prime
    }
  }

  return true;               // prime
}

Read about Math.floor() and Math.sqrt().

Another improvement, as suggested by @teabx, is to validate the value of number against negative numbers. It should also be validated for non-integer values (the prime numbers are always positive integer numbers).

function primo(number) {
  // the numbers smaller than or equal to 1 are not primes
  if (number <= 1) {
    return false;
  }

  // only the integral numbers can be prime
  if (Math.floor(number) !== number) {
    return false;              // not integer
  }

  // divide to each integer number between 2 and its square root
  // there is no need to divide it by greater values; if the number
  // has a factor greater than its square root, then the other factor
  // is smaller that the square root
  for (let n = 2; n <= Math.floor(Math.sqrt(number)); n++) {
    if (number % n === 0) {
      return false;          // not prime
    }
  }

  return true;               // prime
}

EDIT: The top answer updated their solution, so this is no longer valid.

Okay, the answer posted already is correct, but there is another problem with your code. The problem is with the variable you are using on the "for" loop.

The number variable that is passed to the function primo, is going to be of type PointerEvent because the function is being used as an event handler.

Change all instances of "number" to "numero" inside the function, and it should work fine:

let primo = (number) => {
    const numero = document.getElementById('numero').value;
    const resultado = document.getElementById('resultado');
    for (n = 2; n < numero; n++) {
        if (numero % n === 0) {
            resultado.textContent = 'Esse número não é primo.'; // "This number is not prime";
            return;
        }
    } 
    resultado.textContent = 'Esse número é primo.'; // "This number is prime"
}

Correct code would be:

let primo = (number) => {
const numero = document.getElementById('numero').value;
const resultado = document.getElementById('resultado');
let prime = true;
for(n = 2; n < number && prime; n++) {
    if(number % n === 0) {
    prime = false;          
    } 
} 

resultado.textContent = prime ? 'Esse número é primo.' : 'Esse número não é primo.';

}