如何在javascript中撰寫一個函式來匹配兩個單詞-有解無憂

我是編碼新手。我在一個打字網站上作業，該網站將文本欄位中的單詞與網站中顯示的單詞匹配。如何用 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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>

uj5u.com熱心網友回復：

問題是，您在加載檔案時獲取該值，但此時該值為空。

如果您將代碼更改為此，它應該在您鍵入時更新 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);

uj5u.com熱心網友回復：

到目前為止，您的腳本看起來不錯，您只需為您的輸入設定一個事件處理程式，以便在用戶輸入時觸發您的函式。

在您的代碼下方重構了一些建議：

當變數不會改變時，使用 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()

uj5u.com熱心網友回復：

您需要在操作后呼叫您的方法

用戶在輸入中寫入每個鍵后的示例

input.addEventListener('keyup', matchWords);

我還通過 innerText 更改了 innerHTML 以恢復#word 文本

let displayWord = document.getElementById('word').innerText;
let displayMessage = document.getElementById('message');
let input = document.getElementById('input');

input.addEventListener('keyup', matchWords);

function matchWords(event) {
  let target = event.target || event.srcElement;
  if (displayWord === target.value) {
    console.log('words matching')
  }
}

  <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/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

uj5u.com熱心網友回復：

您需要在代碼中添加和更改的東西很少

keyUp()用戶鍵入后，使用函式驗證輸入文本。你需要呼叫你寫的JS函式keyUp。

<input type="text" name="" id="input" onKeyUp="return matchWords()">
您需要在驗證函式中獲取文本框值。可以通過每次在函式中獲取值或使用 event.target 來完成。我使用了第一種方法來更好地理解
這是區分大小寫的檢查，這意味著 hello 和 Hello 不匹配

作業代碼

let displayWord = document.getElementById('word').innerText;
let displayMessage = document.getElementById('message');


function matchWords() {
  let inpWord = document.getElementById('input').value;
  document.getElementById('message').innerHTML = (displayWord === inpWord) ?
    'words matching' : 'words do not match';

}

<!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/[email protected]/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" onKeyUp="return matchWords()">
        <h4 id="message" class="p-4"></h4>
      </div>
    </div>
  </div>


  <script src="script.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/436041.html

標籤：javascript html 功能匹配单词

上一篇：如何在javascript中將blob轉換為wav檔案并連接python燒瓶

下一篇：未捕獲的參考錯誤：（函式）未定義JAVASCRIPT