javascript - 行话字母有时不起作用

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>

尝试输入如下内容:(第一个字母)r r r e

这很可能会出现错误，并且不会为最后的“e”赋予颜色。此外，r 将是黄色的，它应该是红色的(但这并不总是发生)。

知道为什么会这样吗？

---

(*) 对于不知道的人，Lingo 是一款荷兰语游戏，您可以在其中猜测单词，如果不是正确的单词，则字母在该单词中但在另一个单词中时会变黄当它根本不在单词中时，它会变成 Blob 和红色。)

Answer 1

如果我没有理解 Lingo 的运行方式，您输入的字母(如第 4 个)应该具有绿色/黄色/红色背景。现在，字母应该 所在的位置变成了黄色背景。因此，黄色有时会出现在错误的位置(在某些情况下，某些字母的背景会保持白色)。

固定代码:

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/