Witam. Mam problem z programem w JavaScript. Otóż po kliknięciu przycisku OK, niezależnie od wpisanego kodu zawsze wyświetla mi się zielony napis "Witaj w pracy". Nie mam pojęcia co zrobić, aby w przypadku wpisania złego kodu wyświetlał się czerwony komunikat o nieznajomości kodu PIN. Czy coś w tym kodzie źle przypisałem?
Tutaj treść zadania:
• Wciśnięcie przycisku „OK” powinno wyzwolić sprawdzenie numeru PIN:
◦ jeśli przekroczono dozwoloną ilość prób to powinien się wyświetlić akapit klasy „error” w sekcji klasy „msg”,
◦ jeśli wpisany numer pin jest poprawny (poprawny pin zapisano w atrybucie „data-pin” elementu „body”) to należy wyświetlić akapit klasy „success” w sekcji klasy „msg”,
A tutaj kod HTML, CSS i JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>PS5 - Zadanie 1</title>
<meta charset="utf-8">
<link rel="stylesheet" href="zad1.css">
</head>
<body data-pin="4790">
<section class="msg">
<h2>Witaj w systemie firmowym!</h2>
<p class="error">Niestety nie znasz numeru PIN!</p>
<p class="success">Witaj w pracy!</p>
<p class="info">Podaj PIN! Pozostała ilość prób: <span id="attempts" data-max="3">3</span></p>
</section>
<section class="secure">
<h2 id="pin-display"></h2>
<div class="keyboard">
<div>
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
</div>
<div>
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
</div>
<div>
<button value="7">7</button>
<button value="8">8</button>
<button value="9">9</button>
</div>
<div>
<button value="reset">Reset</button>
<button value="0">0</button>
<button value="ok">OK</button>
</div>
</div>
<p>Bardzo Bezpieczna Firma S.A.</p>
</section>
<script src="zad1.js"></script>
</body>
</html>
* {
box-sizing: border-box;
}
section {
margin: 0;
padding: 20px;
}
section.msg {
position: absolute;
top: 2%;
left: 0;
height: 20%;
width: 100%;
}
section.msg h2, section.msg p {
text-align: center;
}
section.msg p {
font-weight: bold;
}
section.msg p.error {
color: red;
display: none;
}
section.msg p.success {
color: green;
display: none;
}
section.secure {
position: absolute;
top: 25%;
left: 30%;
width: 40%;
height: 60%;
border: 1px solid black;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: rgb(100,192,100);
padding-bottom: 5px;
}
section.secure h2 {
font-size: 30px;
font-family: monospace;
background-color: black;
width: 100%;
height: 40px;
margin: 0;
color: white;
font-weight: bold;
text-align: right;
padding: 2px;
border: 3px solid rgb(0,100,0);
}
section.secure p {
text-align: right;
font-style: italic;
}
div.keyboard {
display: flex;
flex-direction: column;
justify-content: space-around;
flex: 6;
}
div.keyboard > div {
display: flex;
justify-content: space-around;
}
div.keyboard > div > button {
width: 25%;
height: 3em;
box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
}
div.keyboard > div > button:active {
box-shadow: none;
}
let przyciski = document.querySelectorAll('button');
let pin = document.querySelector('body').dataset.pin;
let obiekt = document.getElementById('pin-display');
let msgError = document.querySelector('section.msg p.error');
let msgSuccess = document.querySelector('section.msg p.success');
for(przycisk of przyciski){
przycisk.addEventListener('click', function(event){
kliknietoPrzycisk(event.target.value);
});
}
function kliknietoPrzycisk(numer){
if(numer == "reset"){
obiekt.textContent = null;
}
else if(numer == "ok"){
if(pin == "4790"){
msgSuccess.style.display = 'block';
}
else{
msgError.style.display = 'block';
}
obiekt.textContent = null;
}
else{
obiekt.textContent = obiekt.textContent + numer;
}
}
