Javascript: Compare value of an input text box to the values of ul li elements

Question

I am trying to compare the elements inside my unordered list to the value in the input textbox. If the value in the input text box matches a word in the unordered list I want to do something with that word in the unordered list.

Here is my JavaScript code:

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 is the ID of the unordered list.
#pickedLetters is the ID of the input text box.

Here is the entire javascript code and html code:

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

First you'll need to attach an event listener to the input element #pickedLetters. I used keyup in this example but feel free to pick what suits your use-case best.

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

I also fixed some of your sample code. See below with comments:

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: Compare value of an input text box to the values of ul li elements

Question

1 answers

solution1
0 ACCPTED 2021-04-06 16:19:30

Javascript: Compare value of an input text box to the values of ul li elements

Question

1 answers

solution1 0 ACCPTED 2021-04-06 16:19:30

solution1
0 ACCPTED 2021-04-06 16:19:30