Lingo字母有时不起作用

Question

我必须创建一个Lingo （*）游戏作为我学校的作业。

我终于完成了，但是有时字母错误并且没有得到颜色或颜色错误。

 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> 

尝试输入以下内容：（第一个字母）rrre

这很可能会出错，并且不会为最后的“ e”赋予颜色。 另外，r将为黄色，应为红色（尽管并非总是如此）。

任何想法为什么会这样？

---

（*）对于不认识的人，Lingo是一款荷兰语游戏，您可以猜测单词，如果不是正确的单词，则字母在该单词中时会变为黄色，而在其他位置时则变为黄色，而在其他位置时则变为红色完全不言而喻。）

Answer 1

如果我正确理解Lingo的运行方式，那么您键入的字母（例如4th）应该是绿色/黄色/红色背景。 现在，该字母所在的位置将变为黄色背景。 因此，黄色有时会出现错误的位置（在某些情况下，某些字母的背景会保持白色）。

固定代码：

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

演示： https : //jsfiddle.net/v3j4L5af/