Mein Javascript-Code ist nicht mit dem Dom verknüpft [Duplikat]

Question

Ich wurde aufgefordert, eine Funktion zu erstellen, die eine Primzahl erkennt und auf der Konsole hervorragend funktioniert, bis ich meine konstante Nummer mit dem Eingang und meine Funktion mit der Schaltfläche verknüpft habe.

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>

Wie kann man dieses Problem lösen?

Answer 1

Um den Wert einer Eingabe zu erhalten, müssen Sie die valueEigenschaft anstelle der folgenden verwenden innerHtml:

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>

Answer 2

document.querySelector ('. input1'). innerHTML Dies ist falsch

Sie sollten document.querySelector ('. Input1'). Value verwenden