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

Question

我是编码新手。我在一个打字网站上工作，该网站将文本字段中的单词与网站中显示的单词相匹配。如何写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>

Answer 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);

Answer 2

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

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

当变量不会改变时，使用 const 而不是 let。
存储 HTML 元素是否更好，这样您就可以用它做更多事情。

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

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()

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

How to write a function in javascript to match two words

html

javascript

function

word

match