Background is not changing accordingly in html-CodePudding

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" ></div>
  <div id="l2" ></div>
  <div id="l3" ></div>
  <div id="l4" ></div>
  <div id="l5" ></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" ></div>
  <div id="l2" ></div>
  <div id="l3" ></div>
  <div id="l4" ></div>
  <div id="l5" ></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.

CodePudding user response：

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" ></div>
<div id="l2" ></div>
<div id="l3" ></div>
<div id="l4" ></div>
<div id="l5" ></div>

CodePudding user response：

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  ;
    }
}