如何检查此代码中的字符串中是否包含猜测的字符？

Question

我要尝试做的是，如果用户在正确的位置猜到了正确的字母，它将以绿色输出该字母。 如果用户猜出答案中的字母，但是在错误的位置，它将以红色输出。 而且，如果用户猜测答案中没有的字母，则会以黑色输出。 我正在努力弄清楚如何制作它，以便它可以检查字母是否在代码中，但不在正确的位置。

<script>
var secret = 'OPIMNC';
function init(){
    var button = document.getElementById('startButton');
    button.onclick = myButtonClick;
}
function myButtonClick(){
    var userTry = document.getElementById('userGuess').value;
    var ul = document.getElementById('guessList');
    var li = document.createElement('li');
    for (var i=0; i < secret.length; i++) {
        var found = false;
        if ((userTry.charAt(i))===(secret.charAt(i))) {
            li.innerHTML += userTry.charAt(i).fontcolor('green');
            found = true;
        }

        //if character is in the code but in the wrong place, output the font in red
        else if ???? {
            for (var j=0; j < secret.length; j++) {
            ??????????????
            }
            found = true;
            li.innerHTML += userTry.charAt(i).fontcolor('red');


        else if (found===false) {
            li.innerHTML += userTry.charAt(i).fontcolor('black');
        }
    }
    ul.appendChild(li);
}

window.onload = init;
</script>

Answer 1

您是否研究过string.indexOf（）方法？

if(secret.indexOf('[CHAR or STRING]') >= 0) {
// Character or string is within secret string
} else {
// Character or string is NOT within secret string : index == -1
}

Answer 2

 var secret = 'ABCDEF'; function init() { var button = document.getElementById('startButton'); button.onclick = myButtonClick; } function myButtonClick() { var userTry = document.getElementById('userGuess').value; if(userTry.length !== 6){ document.getElementById('error').innerHTML = "I need 6 characters !"; return; } document.getElementById('error').innerHTML = ""; var ul = document.getElementById('guessList'); ul.innerHTML = ""; //Clear list for (var i = 0; i < secret.length; i++) { var color; if (userTry.charAt(i) === secret.charAt(i)) { //Correct index color = 'geen' } else if (secret.indexOf(userTry.charAt(i)) !== -1) { //Present but wrong index color = 'red'; } else { //Not present color = 'black'; } //Add letters to list with correct colors var li = document.createElement('li'); li.innerHTML = userTry.charAt(i).fontcolor(color); ul.appendChild(li); } } window.onload = init; 

 <input type="text" id="userGuess" maxlength="6"/> <button type="submit" id="startButton">Start</button> <p style="color: red;" id="error"></p> <ul id="guessList"> </ul> 

Answer 3

好的，所以我希望代码中的更改能够解决问题...

 <script> var secret = 'ABCDEF'; function init(){ var button = document.getElementById('startButton'); button.onclick = myButtonClick; } function myButtonClick(){ //alert('Button clicked'); var userTry = document.getElementById('userGuess').value; var ul = document.getElementById('guessList'); var li = document.createElement('li'); for (var i=0; i < secret.length; i++) { var found = false; if ((userTry.charAt(i))===(secret.charAt(i))) { //if secret code and guess are a match, display letter in green li.innerHTML += userTry.charAt(i).fontcolor('green'); found = true; } //~~~~~~~~~~~~CHANGE HERE~~~~~~~~~~~~ else { for (var j=0; j < secret.length; j++) { if ((userTry.charAt(i))===(secret.charAt(j))) { found = true; } } if (found===true) { li.innerHTML += userTry.charAt(i).fontcolor('red'); } else { //need to show user character is totally wrong li.innerHTML += userTry.charAt(i).fontcolor('black'); } } //~~~~~~~~~~~~CHANGE END~~~~~~~~~~~~ } ul.appendChild(li); alert(userTry); } window.onload = init; </script> 

祝你好运！