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

好的，所以我希望代码中的这个改变能解决问题...

＆＃13;

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

＆＃13;

祝你好运！

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

3 个答案: