Question

我正在尝试制作一个简单的打字机，其中用户需要输入给定的文本。用户写的文本将与给定文本进行比较，如果匹配，则给定文本的背景颜色将变为绿色。

我有这个div：

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

和此文本区域：

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

我在文本区域上有一个带有事件监听器的javascript代码：

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

每当按下textarea中的一个键时，它将检查文本是否与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";
     }
   }
}

问题是比较不起作用。有人可以解释一下我做错了什么吗，所以请不仅提供解决方案，还请提供一个解释以便我可以学习。

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>

有关完整代码，请检查：

JSFiddle

Answer 1

我相信您打算这样做？

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>

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

1 个答案: