Javascript：將輸入文本框的值與 ul li 元素的值進行比較

Question

我正在嘗試將無序列表中的元素與輸入文本框中的值進行比較。 如果輸入文本框中的值與無序列表中的一個詞匹配，我想對無序列表中的那個詞做一些事情。

這是我的 JavaScript 代碼：

function CheckWordMatch() {
   var wordList = document.getElementById("wordSearchTable");
   var wordListLi = wordList.getElementsByTagName("li");
   var inputBoxText = document.getElementById("pickedLetters");

   for (var i = 0; i < wordListLi.length; i++) {
      if (inputBoxText.value === wordListLi[i].value) {
         wordArray.style.textDecoration = "line-through";
         console.log("IT WORKS");
      }
   }
}

#wordSearchTable是無序列表的 ID。
#pickedLetters is輸入文本框的 ID。

這是整個 javascript 代碼和 html 代碼：

var allCells;
var found = false;

window.onload = init;

function init() {
   document.querySelectorAll("aside h1")[0].innerHTML = wordSearchTitle;
   document.getElementById("wordTable").innerHTML = drawWordSearch(letterGrid, wordGrid);
   document.getElementById("wordList").innerHTML = showList(wordArray);
   allCells = document.querySelectorAll("table#wordSearchTable td");
   for (var i = 0; i < allCells.length; i++) {
      allCells[i].addEventListener("mousedown", highlightLetters)
      allCells[i].style.cursor = "pointer";
      allCells[i].addEventListener("mouseup", removeMouseDown)
   }
   document.getElementById("pickedLetters").addEventListener('keyup', CheckWordMatch);

   //document.getElementById("wordTable").addEventListener("mouseup", CheckWordMatch);

   console.log("Hello");
}

/*============================================================*/

function drawWordSearch(letters, words) {
   var rowSize = letters.length;
   var colSize = letters[0].length;

   var htmlCode = "<table id='wordSearchTable'>";
   htmlCode += "<caption>Word Search</caption>";

   for (var i = 0; i < rowSize; i++) {
      htmlCode += "<tr>";

      for (var j = 0; j < colSize; j++) {
         if (words[i][j] == " ") {
            htmlCode += "<td>";
         } else {
            htmlCode += "<td class='wordCell'>";
         }
         htmlCode += letters[i][j];
         htmlCode += "</td>";
      }

      htmlCode += "</tr>";
   }
   htmlCode += "</table>";

   return htmlCode;
}

function showList(list) {
   var htmlCode = "<ul id='wordSearchList'>";

   for (var i = 0; i < list.length; i++) {
      htmlCode += "<li>" + list[i] + "</li>";
   }

   htmlCode += "</ul>";

   return htmlCode;
}

function removeMouseDown(e) {
   for (var i = 0; i < allCells.length; i++) {
      allCells[i].removeEventListener("mouseenter", highlightLetters2)
   }
   CheckWordMatch();
}

function highlightLetters2(e) {
   var inputBoxValue = document.getElementById("pickedLetters");
   e.target.style.backgroundColor = "pink";
   inputBoxValue.value = inputBoxValue.value + e.target.textContent;
   for (var i = 0; i < allCells.length; i++) {
      allCells[i].addEventListener("mouseup", removeMouseDown)
   }
}

function highlightLetters(e) {
   var inputBoxValue = document.getElementById("pickedLetters");
   e.target.style.backgroundColor = "pink";
   inputBoxValue.value = e.target.textContent;
   for (var i = 0; i < allCells.length; i++) {
      allCells[i].addEventListener("mouseenter", highlightLetters2)
   }
}

function CheckWordMatch(event) {
   var inputBoxText = event.target.value;
   var wordList = document.getElementById("wordSearchTable");
   var wordListLi = wordList.getElementsByTagName("li");
   var inputBoxText = document.getElementById("pickedLetters");
   for (var i = 0; i < wordListLi.length; i++) {
      if (inputBoxText.value === wordListLi[i].textContent) {
         wordArray.style.textDecoration = "line-through";
         console.log("IT WORKS");
      }
   }
}

<!DOCTYPE html>
<html lang="en">
<head>
   
   <title>Word Search</title>
   <meta charset="utf-8" />
   <link href="p2-layout.css" rel="stylesheet"  />
   <script src="p2-makeTable.js" async></script>
   <script src="p2-wordSearch.js" async></script>  

</head>

<body>
   <section id="main">
      <header><br></header>
      <article>
         <figure id="wordTable"></figure>
         <input type="button" value="Show Solution" id="showSolution" />
      </article>
      <aside>
         <h1 id="wordSearchTitle"></h1>
         <input type="text" id="pickedLetters" readonly />
         <figure id="wordList"></figure>
      </aside>
  </section>
</body>
</html>

Answer 1

首先，您需要將事件偵聽器附加到輸入元素#pickedLetters。 我在此示例中使用了keyup ，但請隨意選擇最適合您的用例的內容。

document.getElementById("pickedLetters").addEventListener('keyup', CheckWordMatch);

我還修復了您的一些示例代碼。 請參閱下面的評論：

function CheckWordMatch(event) {
    // get the value of the target which is the value of the input element.
    var inputBoxText = event.target.value;
    var wordList = document.getElementById("wordSearchTable");
    var wordListLi = wordList.getElementsByTagName("li");
    for (var i = 0; i < wordListLi.length; i++) {
        // since you want to compare the value of the input 
        // element with the value (or text) of the li element, 
        //you should use textContent or innerText.
        if (inputBoxText === wordListLi[i].textContent) {
            wordListLi[i].style.textDecoration = "line-through";
            console.log("IT WORKS");
        }
    }
}

// attach an event listener to the input element to trigger your function.
document.getElementById("pickedLetters").addEventListener('keyup', CheckWordMatch);

Javascript：將輸入文本框的值與 ul li 元素的值進行比較

問題描述

1 個解決方案

解決方案1
0 已采納 2021-04-06 16:19:30

Javascript：將輸入文本框的值與 ul li 元素的值進行比較

問題描述

1 個解決方案

解決方案1 0 已采納 2021-04-06 16:19:30

解決方案1
0 已采納 2021-04-06 16:19:30