如何在javascript中编写一个函数来匹配两个单词答案

【问题标题】：How to write a function in javascript to match two words如何在javascript中编写一个函数来匹配两个单词
【发布时间】：2022-08-12 16:16:46
【问题描述】：

我是编码新手。我在一个打字网站上工作，该网站将文本字段中的单词与网站中显示的单词匹配。如何用 Javascript 编写函数。这是我尝试过的。

let displayWord = document.getElementById(\'word\').innerHTML
let displayMessage = document.getElementById(\'message\')
let inpWord = document.getElementById(\'input\').value

function matchWords() {
    if(displayWord === inpWord){
        console.log(\'words matching\')
    }   
}

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <title>Document</title>
    <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">

</head>
<body class=\"bg-secondary text-white\">
    <header class=\"text-center p-2 bg-dark \">
        <h1>Typing test</h1>
    </header>
    
   <div class=\"container text-center\">
        <div class=\"row\">
            <div class=\"col-md-6 mx-auto\">
                <p class=\"p-4\">Type The Given Text</p>
                <h2 class=\"word pb-4\" id=\"word\">Hello</h2>
                <input class=\"form-control form-control-lg\" type=\"text\" name=\"\" id=\"input\">
                <h4 id=\"message\" class=\"p-4\"></h4>
            </div>
        </div>
   </div>
  
    
<script src=\"script.js\"></script>
<script src=\"https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js\" integrity=\"sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p\" crossorigin=\"anonymous\"></script>
<script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js\" integrity=\"sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF\" crossorigin=\"anonymous\"></script>
</body>
</html>

您想在每次按下键后匹配单词还是只匹配一次？
几件事，.. 1：matchWords 永远不会在任何地方调用，您可能希望将输入事件附加到输入。 2. innerText 而不是 innerHTML 可能是比较的更好选择。此外，.innerText 需要在您的函数内部进行检查，否则它的值将始终是呈现页面时的值。

标签： javascript html string function match

【解决方案1】：

问题是，您在加载文档时获取该值，但此时该值为空。

如果您将代码更改为此，它应该在您键入时更新 h4 字段。

let displayWord = document.getElementById("word").innerHTML;
let displayMessage = document.getElementById("message");
let inpWord = document.getElementById("input");

function matchWords() {
  if (displayWord === inpWord.value) {
    displayMessage.innerText = "words matching";
  }
}

input.addEventListener("keyup", matchWords);

【讨论】：

【解决方案2】：

到目前为止，您的脚本看起来不错，您只需为您的输入设置一个事件处理程序，以便在用户输入时触发您的函数。

在您的代码下方重构了一些建议：

当变量不会改变时，使用 const 而不是 let。

以这样的方式存储 HTML 元素是否更好，您将能够使用它做更多事情。

在这种情况下，我使用 input 元素来更改其轮廓颜色并更改消息

const word = document.getElementById('word')
const message = document.getElementById('message')
const inputText = document.getElementById('input')

function matchWords() {
    if(word.innerHTML === inputText.value){
      message.innerHTML = "It does match!"
      inputText.style.outline = "1px solid green"
    } else {
      message.innerHTML = "It does not match!"
      inputText.style.outline = "1px solid red"
    }
}

inputText.onkeyup = () => matchWords()

【讨论】：