Lingo字母有时不起作用

Question

I have to create a Lingo (*) game as an assignment for my school.

I finally finished it, but sometimes the letter bug and don't get a color or the wrong color.

 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 && letter3 == raad3 && letter4 == raad4 && 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); 

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

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Lingo</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="alles"> <h1>Lingo!</h1> <p class="denk">Type in wat je denkt: </p> <center> <p id="eerste"></p> <input maxlength="1" type="text" name="input2" class="input2" id="input2"> <input maxlength="1" type="text" name="input3" class="input3" id="input3"> <input maxlength="1" type="text" name="input4" class="input4" id="input4"> <input maxlength="1" type="text" name="input5" class="input5" id="input5"> <button id="check" onclick="check()">Check!</button> <p class="woordraad" id="woordraad"></p> <p class="raad">Je hebt het woord geraden!! =D</p> </center> </div> <script src='https://code.jquery.com/jquery-3.1.0.min.js'></script> <script src="java.js"></script> </body> </html> 

Try typing in something like: (first letter) rrre

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).

Any ideas why this is happening?

---

(*) 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.)

Answer 1

If I understood right how Lingo goes, the letter what you typed (like 4th) should get green/yellow/red background. Now, the place where the letter should be gets the yellow background. Because of this, the yellow color is sometimes in wrong place (and in some cases some letters' background stays white).

Fixed code:

if (letter2 == raad2) {
    document.getElementById('input2').style.background = "green";
} else if (letter3 == raad2) {
    document.getElementById('input2').style.background = "yellow";
} else if (letter4 == raad2) {
    document.getElementById('input2').style.background = "yellow";
} else if (letter5 == raad2) {
    document.getElementById('input2').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('input3').style.background = "yellow";
} else if (letter4 == raad3) {
    document.getElementById('input3').style.background = "yellow";
} else if (letter5 == raad3) {
    document.getElementById('input3').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('input4').style.background = "yellow";
} else if (letter2 == raad4) {
    document.getElementById('input4').style.background = "yellow";
} else if (letter5 == raad4) {
    document.getElementById('input4').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('input5').style.background = "yellow";
} else if (letter4 == raad5) {
    document.getElementById('input5').style.background = "yellow";
} else if (letter2 == raad5) {
    document.getElementById('input5').style.background = "yellow";
} else {
    document.getElementById('input5').style.background = "red";
}

Demo: https://jsfiddle.net/v3j4L5af/