How do I get function called on page load to work with button

Question

let n = document.getElementById('input').value;
const answer = document.getElementById('answer');
const button = document.getElementById('start');
button.addEventListener('click', isPrime(n));

function isPrime(n) {
  if (n === 1) {
    answer.innerHTML = '1 is neither a prime nor a composit number. It is a unit.';
  } else if (n < 0) {
    answer.innerHTML = 'It must be a positiv number.'
  }
  for (const d = 2; d <= n; d++) {
    if (n % d == 0){
        answer.innerHTML = 'It is not a Prime Number';
        break;
    } else {
        answer.innerHTML = 'It is a Prime Number';
    }
  }
}

it is a simple web page with an input, button and a paragraph. When the user inputs a number and presses the button, the paragraph should change wether it is a prime or not. But it only works by refreshing the site and not by button press...

Answer 1

You are getting the value of the input immediately with let n = document.getElementById('input').value; then you are calling the isPrime function immediately as well.

You could do something like this:

const answer = document.getElementById('answer');
const button = document.getElementById('start');
button.addEventListener('click', isPrime); // dont call the function, just pass it.

function isPrime() {
  let n = document.getElementById('input').value; // get the value when function runs.
  if (n === 1) {
    answer.innerHTML = '1 is neither a prime nor a composit number. It is a unit.';
  } else if (n < 0) {
    answer.innerHTML = 'It must be a positiv number.'
  }
  for (const d = 2; d <= n; d++){
    if (n % d == 0){
      answer.innerHTML = 'It is not a Prime Number';
      break;
    } else {
      answer.innerHTML = 'It is a Prime Number';
    }
  }
}

Answer 2

It looks like in your button.addEventListener('click', isPrime(n)); call you are calling the isPrime function instead of passing the function to it. It should work if you change the addEventListener call to this:

button.addEventListener('click', isPrime);

You will probably have to get the number from the input in the isPrime function however instead of passing the number in.

Answer 3

Try this

const button = document.getElementById('start');
button.addEventListener('click', function(){
    let n = document.getElementById('input').value;
const answer = document.getElementById('answer');
    isPrime(n);
});

Answer 4

You cannot reassign a value to the const variable, here is the working example.

HTML

<input id="input"/>
<p id="answer"></p>
<button id="start">Start</button>

Javascript:

var answer = document.getElementById('answer');
const button = document.getElementById('start');
button.addEventListener('click', function(){
  let n = document.getElementById('input').value;
  isPrime(n)
});

function isPrime(n) {
  console.log(n)
if (n === 1) {
    answer.innerHTML = '1 is neither a prime nor a composit number. It is a unit.';
} else if (n < 0) {
    answer.innerHTML = 'It must be a positiv number.'
}
for (let d = 2; d <= n; d++){
    if (n % d == 0){
        answer.innerHTML = 'It is not a Prime Number';
        break;
    } else {
        answer.innerHTML = 'It is a Prime Number';
    }
}
}

Codepen - https://codepen.io/askannan/pen/XWjrVYb