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 में स्टाइल ठीक काम करता है)।

स्टैक ओवरफ्लो चाहता है कि अगर मैं स्निपेट जोड़ना चाहता हूं तो मैं कुछ और विवरण डालूं, इसलिए मैं कुछ टेक्स्ट क्यूज डालूंगा, मुझे नहीं पता कि मैं वास्तव में और क्या कह सकता हूं ...

0
Wojtek Sokol 22 फरवरी 2019, 17:44

1 उत्तर

सबसे बढ़िया उत्तर

मुझे खुशी है कि आपने अपना प्रश्न थोड़ा और संपादित किया, इसे समझना मुश्किल था।

आपकी समस्या बिल्कुल "फॉर" लूप है। आप पासवर्ड के प्रत्येक अक्षर के माध्यम से पुनरावृति करते हैं, इसलिए:

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";
        }
      }
    }

संपादित करें:

अब कोड एक ध्वज का उपयोग करता है, जैसे ही कोई पत्र मिलता है, पृष्ठभूमि बदलना बंद कर देता है। तो चक्र पूरी तरह से चलता है, लेकिन पहले अक्षर पर यह रंग को हरे रंग में बदल देता है। अन्यथा, यह हमेशा लाल रहेगा।

0
H. Figueiredo 22 फरवरी 2019, 18:26