如何将textarea值与div中的文本进行比较

Question

I am trying to make a simple typewriter in which the user needs to type a given text. This text written by the user will be compared with that given text and if it matches the background color of that given text will turn green.

I have this div:

<div class="textToWrite">this is a text</div>

and this text area:

<textarea id="textarea-space" rows="10" cols="75" placeholder="type here your text"></textarea>

I have a javascript code with a eventlistener on the textarea:

textarea1.addEventListener("keypress", checkInputWithText,false);

whenever a key in the textarea is pressed it checks if the text is the same as the value of the textToWrite div:

function checkInputWithText(e){
   if(textarea1.readOnly == false){
     let textToWrite = document.querySelector(".textToWrite");
     if(textarea1.value.trim() == textToWrite.textContent.trim()){
       textToWrite.style.backgroundColor = "green";
     }
   }
}

The problem is that the compare does not work. Can somebody please explain what I am doing wrong, so please not only give a solution but also an explanation so that I can learn.

 function checkInputWithText(e) { if (textarea1.readOnly == false) { let textToWrite = document.querySelector(".textToWrite"); if (textarea1.value.trim() == textToWrite.textContent.trim()) { textToWrite.style.backgroundColor = "green"; } } }

 <div class="textToWrite">this is a text</div> <textarea id="textarea-space" rows="10" cols="75" placeholder="type here your text"></textarea>

For the complete code please check:

JSFiddle

Answer 1

I believe you meant to do this?

 let field; // save the field let textToWrite; // we only want to define it once function checkInputWithText(e) { if (this.value.trim() == textToWrite) { field.style.backgroundColor = "green"; } } window.addEventListener("load", function() { // to make sure the fields exist. field = document.querySelector(".textToWrite"); textToWrite= field.textContent.trim(); document.getElementById("textarea-space").addEventListener("input", checkInputWithText); });

 <div class="textToWrite">this is a text</div> <textarea id="textarea-space" rows="10" cols="75" placeholder="type here your text"></textarea>