title: Lingo letters not working sometimes
body: <p>I have to create a <a href="https://en.wikipedia.org/wiki/Lingo_(Dutch_game_show)" rel="nofollow noreferrer"><strong>Lingo</strong></a> (*) game as an assignment for my school.</p>
  
  <p>I finally finished it, but sometimes the letter bug and don't get a color or the wrong color.</p>
  
  <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 words = ["appel", "aldus", "afwas", "aftel", "aarde", "armen", "actie", "apart", "adres", "avond", "aders", "alarm", "boten", "balen", "beter", "bomen", "boren", "boven", "boxen", "brood", "broek", "brand", "breed", "benen", "beeld", "brief", "beten", "basis", "blauw", "beren", "buren", "banen", "bloed", "broer", "blond", "boter", "beleg", "breng", "baken", "beker", "blind", "bezig", "baden", "bedel", "bazen", "bazin", "baren", "beden", "beken", "bezem", "baard", "bidet", "breuk", "conus", "cello", "creme", "cloud", "cacao", "cadet", "cavia", "ceder", "combi", "china", "clown", "draai", "deden", "dalen", "derde", "delen", "dwaas", "daden", "dader", "dames", "diner", "datum", "dozen", "dreun", "duits", "dagen", "deren", "dwerg", "dwaal", "dwing", "druil", "droog", "draad", "dweil", "drank", "duren", "dwars", "drugs", "daten", "daler", "doorn", "disco", "degen", "droom", "dient", "drone", "dadel", "duwen", "druif", "deken", "deler", "elven", "eigen", "enger", "engel", "elder", "enkel", "effen", "email", "egaal", "fiets", "friet", "files", "forel", "films", "feest", "fruit", "falen", "flora", "fauna", "feeen", "freak", "forum", "fusie", "geven", "gaven", "groen", "graai", "getal", "grens", "grond", "groef", "graal", "gewei", "games", "grote", "groet", "garen", "gebak", "graag", "genre", "glans", "geluk", "geeuw", "horen", "heren", "halen", "hagel", "haren", "helen", "harde", "hemel", "hoofd", "huren", "hamer", "haken", "heden", "hotel", "hobby", "heler", "hoger", "ieder", "index", "immer", "icoon", "inlog", "inzet", "innig", "jovel", "jaren", "jicht", "jabot", "jacht", "jaden", "jagen", "jager", "japon", "jarig", "jawel", "jeans", "jemig", "jeugd", "joint", "jonas", "joule", "koken", "kreet", "koker", "kerst", "kegel", "koude", "kader", "krent", "kamer", "kaars", "kaart", "kraan", "krant", "keren", "kruid", "kerel", "kubus", "kraal", "kleur", "kroon", "klein", "korst", "klopt", "kabel", "kunst", "kopje", "krans", "klimt", "kater", "klink", "kudde", "kruis", "lopen", "laten", "lepel", "links", "laden", "leven", "lezen", "lucht", "lenen", "laser", "lente", "licht", "lader", "leder", "lunch", "lijst", "leger", "leden", "legen", "lagen", "lezer", "lever", "lingo", "loper", "luier", "lager", "leeuw", "maand", "malen", "maken", "media", "meter", "motor", "maten", "markt", "mazen", "molen", "meest", "meren", "model", "meden", "maden", "macht", "meeuw", "mager", "magen", "maren", "manen", "noord", "nieuw", "negen", "namen", "neven", "nodig", "naden", "neder", "nemen", "onder", "optel", "ovaal", "ovale", "onwel", "optie", "orden", "oppas", "ouder", "ophef", "oases", "palen", "plein", "pegel", "paars", "prijs", "piano", "pixel", "paden", "pasta", "pizza", "poten", "paard", "puber", "pauze", "preek", "polis", "pater", "proef", "panda", "penis", "prins", "pluto", "polen", "plint", "quota", "quant", "quark", "queue", "quilt", "quote", "robot", "reken", "raden", "regen", "radio", "rente", "regio", "rugby", "reden", "roken", "ruzie", "ruist", "regel", "racen", "races", "riool", "ramen", "radar", "roman", "rokje", "razen", "roede", "staan", "staal", "speel", "steeg", "stoel", "stook", "steek", "schep", "spijs", "stoep", "shirt", "samen", "sites", "sport", "spalk", "sjaal", "storm", "staat", "steun", "strak", "serie", "shows", "schat", "snoep", "sfeer", "smeer", "speer", "scene", "speld", "smeed", "smaak", "super", "stand", "steer", "smelt", "sedan", "skier", "sluis", "sneer", "steel", "truck", "terug", "typen", "talen", "taboe", "tegel", "taart", "tafel", "trouw", "teken", "teren", "taken", "treur", "tenen", "titel", "thuis", "tiara", "teder", "toets", "tabak", "trein", "tarwe", "telen", "teler", "uiten", "uilig", "uitje", "uiver", "ultra", "uniek", "uppie", "uraan", "uiers", "velen", "vloer", "video", "varen", "vegen", "veren", "vader", "vaten", "vuren", "vrouw", "vlees", "vogel", "vroeg", "vezel", "veins", "vorst", "veder", "vanaf", "vieze", "veger", "villa", "veler", "vrede", "vries", "woord", "wagen", "wonen", "waren", "warme", "weten", "water", "weren", "wazig", "wegen", "weven", "wezen", "weken", "wraak", "wilde", "wreed", "wrede", "wenst", "woest", "xenon", "yacht", "yucca", "zwaar", "zware", "zesde", "zagen", "zalig", "zomer", "zeden", "zwart", "zeven", "zicht", "zadel", "zweet", "zenuw", "zweer", "zweef", "zaden", "zaken", "zeker", "zever", "zeeen"];
  
  
  var random = words[Math.floor(Math.random() * words.length)];
  var checkk = document.getElementById('check');
  var letter1 = random.substring(0, 1);
  var letter2 = random.substring(1, 2);
  var letter3 = random.substring(2, 3);
  var letter4 = random.substring(3, 4);
  var letter5 = random.substring(4, 5);
  var tries = 0;
  
  
  $('.raad').hide();
  
  
  console.log('het woord is: ' + random);
  
  function check() {
      var raad2 = document.getElementById('input2').value;
      var raad3 = document.getElementById('input3').value;
      var raad4 = document.getElementById('input4').value;
      var raad5 = document.getElementById('input5').value;
  
      document.getElementById('eerste').style.background = "green";
  
      if (letter2 == raad2) {
          document.getElementById('input2').style.background = "green";
      }
      else if (letter3 == raad2) {
          document.getElementById('input3').style.background = "yellow";
      }
      else if (letter4 == raad2) {
          document.getElementById('input4').style.background = "yellow";
      }
      else if (letter5 == raad2) {
          document.getElementById('input5').style.background = "yellow";
      }
      else {
          document.getElementById('input2').style.background = "red";
      }
  
      if (letter3 == raad3) {
          document.getElementById('input3').style.background = "green";
      }
      else if (letter2 == raad3) {
          document.getElementById('input2').style.background = "yellow";
      }
      else if (letter4 == raad3) {
          document.getElementById('input4').style.background = "yellow";
      }
      else if (letter5 == raad3) {
          document.getElementById('input5').style.background = "yellow";
      } else {
          document.getElementById('input3').style.background = "red";
      }
  
      if (letter4 == raad4) {
          document.getElementById('input4').style.background = "green";
      }
      else if (letter3 == raad4) {
          document.getElementById('input3').style.background = "yellow";
      }
      else if (letter2 == raad4) {
          document.getElementById('input2').style.background = "yellow";
      }
      else if (letter5 == raad4) {
          document.getElementById('input5').style.background = "yellow";
      }
      else {
          document.getElementById('input4').style.background = "red";
      }
  
      if (letter5 == raad5) {
          document.getElementById('input5').style.background = "green";
      }
      else if (letter3 == raad5) {
          document.getElementById('input3').style.background = "yellow";
      }
      else if (letter4 == raad5) {
          document.getElementById('input4').style.background = "yellow";
      }
      else if (letter2 == raad5) {
          document.getElementById('input2').style.background = "yellow";
      }
      else {
          document.getElementById('input5').style.background = "red";
      }
  
      if (letter2 == raad2 &amp;&amp; letter3 == raad3 &amp;&amp; letter4 == raad4 &amp;&amp; letter5 == raad5) {
          $('.raad').show();
      }
  
      $('#woordraad').text(letter1 +
          document.getElementById('input2').value +
          document.getElementById('input3').value +
          document.getElementById('input4').value +
          document.getElementById('input5').value);
  
      tries++;
  }
  
  $('.alles').fadeIn(400);
  
  $('#eerste').text(letter1);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1 {
      text-align: center;
      font-size: 80px;
  }
  
  p.denk {
      text-align: center;
      font-size: 25px;
  }
  
  .input2,.input3,.input4,.input5 {
      width: 100px;
      height: 100px;
      text-align: center;
      font-size: 40px;
  
  }
  
  #eerste {
      font-size: 40px;
      display: inline-block;
      border: 1px solid #A9A9A9;
      padding-top: 28px;
      padding-bottom: 29px;
      padding-left: 42px;
      padding-right: 42px;
  }
  
  p.woordraad {
      font-size: 50px;
  }
  
  p.raad {
      font-size: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
   &lt;meta charset="UTF-8"&gt;
   &lt;title&gt;Lingo&lt;/title&gt;
   &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="alles"&gt;
   &lt;h1&gt;Lingo!&lt;/h1&gt;
  
   &lt;p class="denk"&gt;Type in wat je denkt: &lt;/p&gt;
  
   &lt;center&gt;
    &lt;p id="eerste"&gt;&lt;/p&gt;
    &lt;input maxlength="1" type="text" name="input2" class="input2" id="input2"&gt;
    &lt;input maxlength="1" type="text" name="input3" class="input3" id="input3"&gt;
    &lt;input maxlength="1" type="text" name="input4" class="input4" id="input4"&gt;
    &lt;input maxlength="1" type="text" name="input5" class="input5" id="input5"&gt;
    &lt;button id="check" onclick="check()"&gt;Check!&lt;/button&gt;
    &lt;p class="woordraad" id="woordraad"&gt;&lt;/p&gt;
  
    &lt;p class="raad"&gt;Je hebt het woord geraden!! =D&lt;/p&gt;
   &lt;/center&gt;
  &lt;/div&gt;
  
   &lt;script src='https://code.jquery.com/jquery-3.1.0.min.js'&gt;&lt;/script&gt;
   &lt;script src="java.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Try typing in something like: (first letter) r r r e </p>
  
  <p>This will most likely bug and won't give the last 'e' a color. Also, the r will be yellow, which should be red (this doesn't always happen though).</p>
  
  <p>Any ideas why this is happening? </p>
  
  <hr>
  
  <p><em>(*) For people who don't know, Lingo is a Dutch game where you guess words and if it isn't the right word, the letters get yellow when they are in that word but in an other spot and red when it isn't in the word at all.)</em></p>