Background is not changing accordingly in html

Question

I am remaking Wordle for a fun project to get my brain going. I have run into an issue though where squares are getting their background color changed when they are not supposed to.

html:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="l1" class="letterBox"></div>
  <div id="l2" class="letterBox"></div>
  <div id="l3" class="letterBox"></div>
  <div id="l4" class="letterBox"></div>
  <div id="l5" class="letterBox"></div>
  <script src="script.js"></script>
</body>

</html>

js:

var letter = 0
var id
const word = ["h","e","l","l","o"]
var guess = []
window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Do nothing if the event was already processed
  }
  var key = event.key
  letter+=1
  id = "l".concat(letter)
  document.getElementById(id).innerHTML = key  
  guess.push(key)
  
  event.preventDefault();
  if(letter == 5){
    for(i in word){
      b=parseInt(i)+1-0
      letter = word[i]
      for(x in guess){
        gulet = guess[x]
        if(gulet==letter){
          id = "l"+b
          document.getElementById(id).style.background = "yellow"  
        }
      }
    }
  }
}, true);

css:

html, body {
  width: 100%;
  height: 100%;
}

#element1 {display:inline-block;margin-right:10px;} 

.letterBox {
  display: inline-block;
  text-align: center;
  font-size: 40px;
  height: 50px;
  width: 50px;
  background-color: #ffffff;
  border: 2px solid black;
  border-radius: 7px;

var letter = 0
var id
const word = ["h","e","l","l","o"]
var guess = []
window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Do nothing if the event was already processed
  }
  var key = event.key
  letter+=1
  id = "l".concat(letter)
  document.getElementById(id).innerHTML = key  
  guess.push(key)

  event.preventDefault();
  if(letter == 5){
    for(i in word){
      b=parseInt(i)+1-0
      letter = word[i]
      for(x in guess){
        gulet = guess[x]
        if(gulet==letter){
          id = "l"+b
          document.getElementById(id).style.background = "yellow"  
        }
      }
    }
  }
}, true);

html, body {
  width: 100%;
  height: 100%;
}

#element1 {display:inline-block;margin-right:10px;} 

.letterBox {
  display: inline-block;
  text-align: center;
  font-size: 40px;
  height: 50px;
  width: 50px;
  background-color: #ffffff;
  border: 2px solid black;
  border-radius: 7px;

<div id="l1" class="letterBox"></div>
  <div id="l2" class="letterBox"></div>
  <div id="l3" class="letterBox"></div>
  <div id="l4" class="letterBox"></div>
  <div id="l5" class="letterBox"></div>

The constant 'word' is what the letters are being compared to.

Someone removed this part so I am adding it back. An example of a word that breaks it is 'halaa' and 'haala'

I researched this problem and I have not found anyone with this same problem, so I do not know where to even start.

Does [this](https://stackoverflow.com/questions/71885319/how-to-make-multiple-contenteditable-divs-turn-green-if-word-is-correct/71885624#71885624) help ? — Cédric, Apr 26 '22 at 12:25
`if (gulet == letter)` -> in this part you are comparing EVERY letter each by each in `word` to the `gulet` — Guga Nemsitsveridze, Apr 26 '22 at 12:34

0stone0 · Answer 1 · 2022-04-26T13:05:57.710

0

There are quite some mistakes in your code, I'll try to address them one by one:

Watch out ids with leading numbers
No need for the letter variable, we can use guess.length for the same result
id = "l".concat(letter) can just ben 'l' + n' (but not needed)
b=parseInt(i)+1-0 can be: parseInt(i) + 1, since the - 0 doesn't do anything
if(gulet==letter){ compares an char vs a int, won't work as expected

Fixing the above, simplifying the code, gives us something like:

const word = ["h","e","l","l","o"]
var guess = []

window.addEventListener("keydown", (event) => {

  if (event.defaultPrevented) {
    return; // Do nothing if the event was already processed
  }
  event.preventDefault();
  
  var key = event.key
  var id = "l" + (guess.length + 1);
  document.getElementById(id).innerHTML = key  
  guess.push(key)

  if (guess.length == 5){  
    for (let i in guess){
      if (guess[i] == word[i]){
          id = 'l' + (+i + 1)
          document.getElementById(id).style.background = "yellow"  ;
      }
    }
  }
}, true);

html, body { width: 100%; height: 100%; }
.letterBox { display: inline-block; text-align: center; font-size: 40px; height: 50px; width: 50px; background-color: #ffffff; border: 2px solid black; border-radius: 7px; }
#element1 {display:inline-block;margin-right:10px;}

<div id="l1" class="letterBox"></div>
<div id="l2" class="letterBox"></div>
<div id="l3" class="letterBox"></div>
<div id="l4" class="letterBox"></div>
<div id="l5" class="letterBox"></div>

edited Apr 26 '22 at 13:05

answered Apr 26 '22 at 12:34

0stone0

34,288
4
39
64

This was not my problem. I know that if I type H three times they will all be yellow but my problem is an A turning yellow when A is not even in the word. – TryToDoIt Apr 26 '22 at 12:37
If I fill in 5 x 'a' non of them are coloured in your example. – 0stone0 Apr 26 '22 at 12:38
Try using 'halaa' or 'haala' – TryToDoIt Apr 26 '22 at 13:24
Please check my new answer, the bug seems to be resolved using my code example. – 0stone0 Apr 26 '22 at 13:26
`letter = word[i]` letter is not an int. – TryToDoIt Apr 26 '22 at 14:01
Yes, I reused a var, yes I know I should not. – TryToDoIt Apr 26 '22 at 14:02
Also it breaks the purpose of it being yellow if it checks with anything. If I use `ohlel`, they should all be yellow. – TryToDoIt Apr 26 '22 at 14:04
Your requirements are very unclear. Please add more details, everything to your question. – 0stone0 Apr 26 '22 at 14:06
It could not be any more clear. It is like the game wordle. – TryToDoIt Apr 26 '22 at 14:10

Guga Nemsitsveridze · Answer 2 · 2022-04-26T12:58:07.540

-1

I changed this code snippet for you & I hope it works

if(letter === 5){
    let idx = 0;
    for(let i in word){
        if (word[i] === guess[i]) {
            document.getElementById(`l${idx}`).style.background = "yellow";
        }
        idx++;
    }
}

edited Apr 26 '22 at 12:58

answered Apr 26 '22 at 12:39

Guga Nemsitsveridze

721
2
7
27

This did not solve the problem. Thanks for trying! – TryToDoIt Apr 26 '22 at 12:41
@TryToDoIt Can you show me what's the result? Maybe now you have a different issue – Guga Nemsitsveridze Apr 26 '22 at 12:43
It gives the same result. When I enter a word such as halaa, It makes the A after the L become yellow even though there is no A in the original word. – TryToDoIt Apr 26 '22 at 12:44
@TryToDoIt I updated the answer, please, check it out – Guga Nemsitsveridze Apr 26 '22 at 12:58
What did you change? – TryToDoIt Apr 26 '22 at 13:04
`idx` now is incremented after using ing – Guga Nemsitsveridze Apr 26 '22 at 13:29
How does that change it so it works? – TryToDoIt Apr 26 '22 at 13:59

Background is not changing accordingly in html

2 Answers2