Добрый вечер! не выходит сделать д/з
мини банкомат с тремя пользователями ( массив объекта)
суть понимаю что при правильном ведении пароля и нажатии кнопки "ок"должны попадать во второе окно где виден баланс и транзакции снятия пользователя при не верном вводе на экране появляется div error . не могу сделать логику чтобы связать действия ввода пароля и дальнейшее отображения данных пользователя
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ATM</title>
<script src="bank.js" defer></script>
<script src="jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwi cKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W 1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKj NkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<style>
body{
padding: 0px;
margin: 0px;
display: flex;
background: #808080;
flex-direction: row;
justify-content: center;
}
#screen1{
/*display: none;*/
display: flex;
flex-direction: column;
align-items: center;
margin-top: 10px;
width: 230px;
height: 190px;
background: #cdeb8b;
border-radius: 6px;
}
#screen2{
display: none;
flex-direction: column;
/*display: flex;*/
margin-top: 10px;
width: 230px;
height: 190px;
background: #cdeb8b;
border-radius: 6px;
justify-content: space-between;
align-items: center;
}
#login_to_the_system{
margin: 0px;
padding: 0px;
display: flex;
flex-direction: row;
justify-content: space-between;
background: #e0f0d6;
width: 230px;
height: 30px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
text-align: center;
}
#buttonRes{
text-align: center;
margin-bottom: 20px;
border-radius: 6px;
color: white;
width: 60px;
height: 30px;
background:#3c88c9;
border: 6px solid #3d8bcd;
}
.login{
padding-left: 12px;
margin-top: 6px;
color: #5dba5c;
font-size: 16px;
}
#error{
display: none;
margin-top: 20px;
background: red;
width: 153px;
height: 40px;
border-radius: 6px;
color: white;
text-align: center;
font-size: 16px;
}
#one, #two, #three, #four, #five, #six, #seven, #eight, #nine, #zero, #ok, #del{
margin:6px;
border-radius: 6px;
color: white;
width: 60px;
height: 30px;
background:#3c88c9;
border: 6px solid #3d8bcd;
}
#Pass{
border-radius: 0px 6px 6px 0px;
height: 30px;
width: 125px;
border:#f0f0f0;
}
#passbutton{
margin-top: 35px
}
.block_pin{
width: 30px;
height: 30px;
background: #f0f0f0;
border-radius: 6px 0px 0px 6px;
}
.block{
display: flex;
}
.block>img {
position: absolute;
vertical-align: middle;
border-style: none;
margin: 5px;
}
.size{
padding: 0;
margin: 0;
font-size: 12px;
}
table{
margin-bottom: 7px;
}
.user{
display: flex;
flex-direction: row;
align-items: center;
}
.user>img{
margin: 5px;
}
.balans{
background: #ffffff;
width: 68px;
height: 20px;
border-radius: 6px;
color: #4283e2;
text-align: center;
font-size: 12px;
}
.sum{
background: #ffffff;
width:70px;
height: 40px;
color: #4283e2;
border: 3px solid #3d8bcd;
border-radius: 6px;
font-size: 12px;
text-align: center;
}
.sum_number{
width:70px;
border-radius:12px;
height: 25px;
margin: 3px;
}
.balans_text{
width:70px;
height: 25px;
border-radius: 6px;
border: 3px solid #fff;
background: #d5e8d4;
margin: 3px;
}
.conteiner_user{
flex-direction: row;
display: flex;
justify-content: flex-end;
align-items: center;
}
#X{
margin-top: -9px;
margin-left: 82px;
}
</style>
</head>
<body>
<div id ="container_ATM">
<!--первый экран-->
<div id ="screen1">
<div id ="login_to_the_system">
<p class="login"><b>Вход в систему</b></p>
<form>
<button id ="buttonRes">restart</button>
</form>
</div>
<div id ="passbutton">
<form>
<div class ="block"><img src="e.png" width="20" height="20"class="showpass" /><div class ="block_pin"></div><input type="text" placeholder="pin" id = "Pass"></div>
</form>
<div id="error"> <b>ошибка</b></div>
</div>
</div>
<!--второй экран-->
<div id = "screen2">
<div id ="login_to_the_system">
<div id = "loginX">
<p class="login"><b>Имя фамилия</b><img src ="x.png" width="20" height="20" id = "X"></p>
</div>
</div>
<div class = "user"><img src="bankimg.png" width=60px" height="60px">
<div class ="conteiner_user">
<div>
<div class ="balans"><b>Баланс</b></div>
<div class ="sum"><b>Сумма для снятия</b></div>
</div>
<div>
<div><input type="text" class = "balans_text"></div>
<div><input type="number" size="3" name="num" min="1" max="1000" value="0" class = "sum_number"></div>
</div>
</div>
</div>
<div><table border="2" width="210px" height ="40px" bgcolor
= "#fff" cellpadding="10" >
<tr class = "size">
<td>Сумма </td>
<td>Время</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
<div>
<table>
<tr>
<td><button value ="1" id ='one'>1</button></td>
<td><button value ="2" id ='two'>2</button></td>
<td><button value ="3" id ='three'>3</button></td>
</tr>
<tr>
<td><button value ="4" id ='four'>4</button></td>
<td><button value ="5" id ='five'>5</button></td>
<td><button value ="6" id ='six'>6</button></td>
</tr>
<tr>
<td><button value ="7"id ='seven'>7</button></td>
<td><button value ="8"id ='eight'>8</button></td>
<td><button value ="9"id ='nine'>9</button></td>
</tr>
<tr>
<td><button id ='del'>del</button></td>
<td><button value ="0" id ='zero'>0</button></td>
<td><button id ='ok'>ok</button></td>
</tr>
</table>
</div>
</body>
</html>
$('.showpass').click(function(){
var type = $('#Pass').attr('type') == "text" ? "password" : 'text',
c = $(this).text() == "Скрыть пароль" ? "+" : "- ";
$(this).text(c);
$('#Pass').prop('type', type);
});
//кнопки 1,2,3,4,5,6,7,8,9,0,del
var Pass = document.getElementById('Pass');
var button1 = document.querySelectorAll("button")[1];
button1.addEventListener("click", function() {
Pass.value += 1;
});
var button2 = document.querySelectorAll("button")[2];
button2.addEventListener("click", function() {
Pass.value += 2;
});
var button3 = document.querySelectorAll("button")[3];
button3.addEventListener("click", function() {
Pass.value += 3;
});
var button4 = document.querySelectorAll("button")[4];
button4.addEventListener("click", function() {
Pass.value += 4;
});
var button5 = document.querySelectorAll("button")[5];
button5.addEventListener("click", function() {
Pass.value += 5;
});
var button6 = document.querySelectorAll("button")[6];
button6.addEventListener("click", function() {
Pass.value += 6;
});
var button7 = document.querySelectorAll("button")[7];
button7.addEventListener("click", function() {
Pass.value += 7;
});
var button8 = document.querySelectorAll("button")[8];
button8.addEventListener("click", function() {
Pass.value += 8;
});
var button9 = document.querySelectorAll("button")[9];
button9.addEventListener("click", function() {
Pass.value += 9;
});
var buttondel = document.querySelectorAll("button")[10];
buttondel.addEventListener("click", function() {
document.getElementById("Pass").value = "";
});
var button0 = document.querySelectorAll("button")[11];
button0.addEventListener("click", function() {
Pass.value += 0;
});
//смена экрана
var screen1 = document.getElementById('screen1')
var buttonok = document.querySelectorAll("button")[12];
buttonok.onclick = function() {
screen1.style.display="none";
screen2.style.display="flex";
};
var screen2 = document.getElementById('screen2')
var X = document.getElementById('X')
X.onclick = function() {
screen2.style.display="none";
screen1.style.display="flex";
};
//user
user1=[{ name:'marina',pass:'1111', balans:'500',
T:[{Date:"2017-11-12", Sum:250},{Date:"2017-11-13", Sum:-100}]}]
user2=[{ name:'daha',pass:'2222', balans:'800',
T:[{Date:"2017-11-14", Sum:50},{Date:"2017-11-15", Sum:-50}]}]
user3=[{ name:'saha',pass:'3333', balans:'1000',
T:[{Date:"2017-11-15", Sum:150},{Date:"2017-11-16", Sum:-150}]}]
//провера пароля
//
// if (Pass.value != 1111) {
// error.style.display = "flex"
// }
// else {
// var buttonok = document.querySelectorAll("button")[12];
// buttonok.onclick = function () {
// screen1.style.display = "none";
// screen2.style.display = "flex";
// };
// }