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

Question

What I'm trying to do is if the user guesses the correct letter in the correct spot, it will output the letter in green. If the user guesses the letter that's in the answer, but that's in the wrong spot, it will output in red. And if the user guesses a letter that's not in the answer it will output in black. I'm struggling to figure out how to make it so that it will check if the letter is in the code but not the right place.

<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

Have you looked into the string.indexOf() method?

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

ok, so i hope this change in code will solve the problem...

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

best luck for you!