title: Background is not changing accordingly in html
body: <p>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.</p>
  <p>html:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
    &lt;title&gt;replit&lt;/title&gt;
    &lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id=&quot;l1&quot; class=&quot;letterBox&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;l2&quot; class=&quot;letterBox&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;l3&quot; class=&quot;letterBox&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;l4&quot; class=&quot;letterBox&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;l5&quot; class=&quot;letterBox&quot;&gt;&lt;/div&gt;
    &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>js:</p>
  <pre><code>var letter = 0
  var id
  const word = [&quot;h&quot;,&quot;e&quot;,&quot;l&quot;,&quot;l&quot;,&quot;o&quot;]
  var guess = []
  window.addEventListener(&quot;keydown&quot;, function (event) {
    if (event.defaultPrevented) {
      return; // Do nothing if the event was already processed
    }
    var key = event.key
    letter+=1
    id = &quot;l&quot;.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 = &quot;l&quot;+b
            document.getElementById(id).style.background = &quot;yellow&quot;  
          }
        }
      }
    }
  }, true);
  </code></pre>
  <p>css:</p>
  <pre><code>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;
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="l1" class="letterBox"&gt;&lt;/div&gt;
    &lt;div id="l2" class="letterBox"&gt;&lt;/div&gt;
    &lt;div id="l3" class="letterBox"&gt;&lt;/div&gt;
    &lt;div id="l4" class="letterBox"&gt;&lt;/div&gt;
    &lt;div id="l5" class="letterBox"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The constant 'word' is what the letters are being compared to.</p>
  <p>Someone removed this part so I am adding it back. An example of a word that breaks it is 'halaa' and 'haala'</p>
  <p>I researched this problem and I have not found anyone with this same problem, so I do not know where to even start.</p>