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

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

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 2

你看过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 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>

你

好运！