Question

var pass = 'budi baj baj bastajpan';
var vpass = '';
var password = document.querySelector('#password-field');

function getPassword() {
    vpass = Array.from(pass);
    for (i = 0; i < vpass.length; i++) {
        if (vpass[i] === ' ') {
            vpass[i] = ' ';
        } else {
            vpass[i] = '_';
        }
    }
    password.innerHTML = vpass;
    addLetters();
}

var lettersField = document.querySelector('#letters');

var alfabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'w', 'x', 'y', 'z'];

function addLetters() {
    var letters = '';
    for (i = 0; i < 25; i++) {
        letters = letters + '<span class="letter" id="let' + i + '" onclick="checkLetter(' + i + ')">' + alfabet[i] + '</span>';
    }
    lettersField.innerHTML = letters;
}

function checkLetter(nr) {
    passArr = Array.from(pass);
    for (i = 0; i < 25; i++) {
        if (passArr[i] == alfabet[nr]) {
            document.querySelector("#let" + nr).style.background = "green";
            vpass[i] = alfabet[nr];
            password.innerHTML = vpass;
        } else {
            document.querySelector("#let" + nr).style.background = "red";
        }
    }
}


window.onload = getPassword;

/*
So, basically i know i probably made ton of mistakes but can u explain me why does this two rows: 
vpass[i] = alfabet[nr];
password.innerHTML = vpass;
Work exactly as i want that means it only changes the password when i click on right letter.

But background changes to red whatever letter i click. (every style i put to ELSE work on every letter but styles in IF work fine.
*/

#game {
    width: 600px;
    height: 400px;
    margin: 20px auto;
    border: 3px solid green;
}

#password-field {
    width: 100%;
    height: 100px;
    background: dimgray;
    color: white;
    box-sizing: border-box;
    border-bottom: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
}

#status {
    width: 50%;
    height: 300px;
    background: lightgray;
    position: relative;
    left: 0;
    box-sizing: border-box;
    border-right: 1px solid white;
}

#letters {
    width: 50%;
    height: 300px;
    background: lightgray;
    position: relative;
    left: 50%;
    top: -300px;
    box-sizing: border-box;
    border-left: 1px solid white;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.letter {
    width: 40px;
    height: 40px;
    margin: 5px;
    border: 1px solid white;
    text-align: center;
    line-height: 2;
    border-radius: 10px;
    font-size: 20px;
    transition: .5s;
}

.letter:hover {
    background: lightblue;
    border-color: blue;
    transition: none;
    cursor: pointer;
}

<!DOCTYPE HTML>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <title>Ramphastos Toco</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        
    <div id="game">
        <div id="password-field"></div>
        <div id="status"></div>
        <div id="letters"></div>
    </div>
        
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="main.js"></script>
    </body>
</html>

var pass = 'budi baj baj bastajpan';
var vpass = '';
var password = document.querySelector('#password-field');

function getPassword() {
    vpass = Array.from(pass);
    for (i = 0; i < vpass.length; i++) {
        if (vpass[i] === ' ') {
            vpass[i] = ' ';
        } else {
            vpass[i] = '_';
}
}
password.innerHTML = vpass;
}

var lettersField = document.querySelector('#letters');

var alfabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'w', 'x', 'y', 'z'];

function addLetters() {
    var letters = '';
for (i = 0; i < 25; i++) {
letters = letters + '<span class="letter" id="let' + i + '" onclick="checkLetter(' + i + ')">' + alfabet[i] + '</span>';
}
lettersField.innerHTML = letters;
}

function checkLetter(nr) {
  passArr = Array.from(pass);
  for (i = 0; i < 25; i++) {
    if (passArr[i] === alfabet[nr]) {
      document.querySelector("#let" + nr).style.background = "green";
      vpass[i] = alfabet[nr];
      password.innerHTML = vpass;
    } else {
      document.querySelector("#let" + nr).style.background = "red";
    }
  }
}

您能解释一下为什么这两行吗？

vpass[i] = alfabet[nr];
password.innerHTML = vpass;

完全按照我想要的方式工作，这意味着它仅在单击右字母时才更改密码。

但是无论我单击哪个字母，背景都会变为红色。（我在每个字母上使用ELSE的每种样式，但IF中的样式都可以使用）。

如果我想添加代码段，Stackoverflow希望我提供更多详细信息，所以我只想输入一些文字，因为我不知道我还能说些什么...

Answer 1

很高兴您对问题进行了进一步的编辑，这很难理解。

您的问题恰恰是“ for”循环。您遍历密码的每个字母，因此：

else {
  document.querySelector("#let" + nr).style.background = "red";
}

将始终对与您要评估的密码字母不匹配的所有字母执行。这将覆盖以前进行的任何匹配！

因此，如果您要评估的当前字母不是“ z”，则背景将始终为红色！

我的纠正建议：

function checkLetter(nr) {
    let flag=0;
    passArr = Array.from(pass);
      for (i = 0; i < 25; i++) {
        if (passArr[i] === alfabet[nr]) {
          document.querySelector("#let" + nr).style.background = "green";
          flag=1; //if the letter is found, stop checking for the background
          vpass[i] = alfabet[nr];
          password.innerHTML = vpass;
        } else {
          if(flag==0)
             document.querySelector("#let" + nr).style.background = "red";
        }
      }
    }

编辑：

现在，代码使用一个标志，以在找到字母后立即停止更改背景。因此，循环完全进行，但在找到的第一个字母上将颜色切换为绿色。否则，它将始终为红色。

如果语句有效，奇怪的JavaScript

1 个答案: