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 хочет, чтобы я добавил больше деталей, если я хочу добавить фрагмент, поэтому я просто добавлю текст, потому что я не знаючто еще я могу сказать о ...