my javascript code is not linking to the dom

Question

I was challenged to create a function that recognizes a prime number and that was working great on the console until I linked my const number to the input and my function to the button.

const btn = document.querySelector('.btn1')
if (btn) {
  btn.addEventListener('click', isitPrime)
}

function isitPrime() {
  const number = document.querySelector('.input1').innerHTML
  const answer = document.querySelector('.answer')
  let isPrime = true
  for (let i = 2; i < number; i++) {
    if (number % i === 0) {
      isPrime = false
      answer.innerHTML = (`${number} is not prime
            ${number} can be divided by ${i}`)
    }
    if (isPrime) {
      answer.innerHTML = (`${number} is prime`)
    }
  }
}

<input type="text" class="input1">
<button class="btn1">click here</button> <br/><br/>
<div class="answer"></div>

How to solve this problem?

you want to use .value instead of innerHTML also watch the if statement. isn't 2 a prime number as well? — Jay Lane, Aug 18 '20 at 22:05
`.value` on ``s... also, cast `number`: `const number = +document.querySelector('.input1').value;`. `break;` out of that loop `if(number % i === 0)`, as well. — StackSlave, Aug 18 '20 at 22:12

Namysh · Accepted Answer · 2020-08-18T22:03:58.867

In order to get the value of an input you have to use the value property instead of the innerHtml one, like this :

const btn = document.querySelector('.btn1')
if(btn){
    btn.addEventListener('click', isitPrime)
}
function isitPrime(){
    // here we get 'value' property instead of 'innerHtml' property
    const number = document.querySelector('.input1').value
    const answer = document.querySelector('.answer')
    let isPrime = true
    for(let i = 2; i < number; i++){
        if(number % i === 0){
            isPrime = false
            answer.innerHTML = (`${number} is not prime
            ${number} can be divided by ${i}`)
        }
        if(isPrime){
            answer.innerHTML = (`${number} is prime`)
        }
    }
}

<input type="text" class="input1">
<button class="btn1">click here</button>  <br/><br/>
<div class="answer"></div>

score 1 · Answer 2 · answered Aug 18 '20 at 22:01

1

document.querySelector('.input1').innerHTML This is wrong

You should use document.querySelector('.input1').value

answered Aug 18 '20 at 22:01

Anup Shrestha

99
5

my javascript code is not linking to the dom

2 Answers2