0

Recently, I have been trying to create a wordle game but with 8 letters, and it has been going well, though, when I input my answer into the div boxes, only the first div gets a response when I click the big "CHECK" button. I tried using querySelectorAll but that did not work, using querySelectorAll made it so not even one div had an output. I also tried making it respond to all div elements but that broke some functionality, and did not give me what I wanted. Basically, what I want is to have functionality for all the divs when the "check" button is pressed. Is this possible with querySelector or querySelectorAll?

Here is some of my code:

JS:

    const pText = document.querySelector("#p123").innerText.toUpperCase()
const div = document.querySelector("#amo1, #amo2, #amo3, #amo4, #amo5, #amo6, #amo7") // I tried one value and that worked, multiple values will not work for me, this is the main problem.
const button = document.querySelector("#button123")


button.addEventListener("click", () => {
  const text = div.textContent.toUpperCase()

  //don't check if there are numbers/non letters and text length < 8
  if (text.match(/\d/gi) || text.length < 1 || text.match(/[^a-z]/gi)) {
    div.innerText = text
    return
  }

  div.innerHTML = ""
  text.split("").forEach((letter, i) => {
    if (pText.includes(letter) && pText[i] === letter) {
      div.innerHTML += `<span style="color: lime">${letter}</span>`
    } else if (pText.includes(letter)){
      div.innerHTML += `<span style="color: orange">${letter}</span>`
    } else {
      div.innerHTML += `<span style="color: lightgrey">${letter}</span>`
    }
  })
})

//blur the div if text is longer than 8 letters or key = "space"
div.addEventListener("keydown", (e) => {
  if (div.innerText.length > 0 || e.keyCode == 32) {
    div.blur()
  }
})

//clear on focus
div.addEventListener("focus", () => {
  div.innerHTML = ""
})

HTML:

<p id = "p123">ABsOLUTE</p>
<div id = "div123" contenteditable="true" style="border: 5px solid; padding: 5px; font-size: 22px; font-weight: bold; text-transform: uppercase;" spellcheck="false"></div>
<button id = "button123">check</button>

<div class="square">
 <img/>
</div>
   <div id="game-board">

   </div>
<details>
 <summary class = "summary1">Octordle Summary</summary>
 <h2 class = "summary-content">Octordle is similar to the hit game Wordle, but 8 letters instead of 5.</h2>
</details>

<!-- <input type = text class = "text-box">
<input type = text class = "text-box2"> -->
<div id = "amoo">
<div class="container" style = "position:relative; left:825px; top:-400px;" id = "testu">



    <div oninput = "inputFunc()" tabindex = "1" class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo1"></div>
    <div oninput = "inputFunc()" tabindex = "2" class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo2"></div>
    <div oninput = "inputFunc()" tabindex = "3" class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo3"></div>
    <div oninput = "inputFunc()" class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo4"></div>
    <div oninput = "inputFunc()" class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo5"></div>
    <div oninput = "inputFunc()" class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo6"></div>
    <div oninput = "inputFunc()" class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo7"></div>

Here is all my lines of code in a sololearn project: https://code.sololearn.com/WX59M6HHngc5 Please help, thank you in advance. (By the way, ignore the text input above the "check" box, that was just for testing, I'm focusing on the grid boxes right now)

Infui0ayaan
  • 229
  • 3
  • 14
  • there is a problem with your code. please fix your snippet https://code.sololearn.com/WX59M6HHngc5 its throwing ref error From Line 227 – Aman Deep Apr 17 '22 at 13:59
  • querySelector returns only one element, unsure how you expect it to match more than one. – epascarello Apr 17 '22 at 14:02
  • Epascarello, I tried using querySelectorAll but that didn't do anything – Infui0ayaan Apr 17 '22 at 14:04
  • Robin, I tried using that and calling a class name for all the div grids, but it only worked for one of the div's, the others stayed normal – Infui0ayaan Apr 17 '22 at 14:07
  • 2
    It's because `querySelectorAll` returns list of nodes, so you'll have to loop through each item. Also "it didn't work" doesn't show us what you did, so we can't assist you with that. – vanowm Apr 17 '22 at 14:09
  • I made edits, querySelectorAll did not allow any output from any div when the check box was clicked, sorry if I was unclear. – Infui0ayaan Apr 17 '22 at 14:12
  • 1
    ```querySelectorAll``` returns an array-like object called a node list like @vanowm said. So you'll have to loop through it. – NathanaelDousa Apr 17 '22 at 15:24
  • Alright thanks, by any chance is there any alternative to what I am doing? – Infui0ayaan Apr 17 '22 at 15:54

0 Answers0