JSFiddle - React, Tailwind, and code Playground
HTML
<body ><div id="alles">
<input type="text" id="pass1" size="8">
<input type="text" id="pass2" size="8">
<div id="ausgabe"></div> </div></body>
CSS
#alles{
position:relative;
top:100px;
left:0px;
height:500px;
width:500px;
}
#pass1{
position:absolute;
top:10px;
left:0px;
height:40px;
font-size:35px;
background:red;
}
#pass2{
position:absolute;
top:10px;
left:250px;
height:40px;
font-size:35px;
background:red;
display:none;
}
#ausgabe{
position:absolute;
top:50px;
left:10px;
width:400px;
height:200px;
font-size:40px;
}
JavaScript
start()
var sPuffer = new String;
function start(){
document.onkeydown = function(event) {
if(event.keyCode==13){
abfrage(sPuffer)
sPuffer='';
}else if(event.keyCode>=40){
sPuffer+=event.key;
aa= sPuffer.replace('/[^0-9]/','s');
console.log(sPuffer)
}
}
}
function abfrage(sPuffer){
console.log(sPuffer)
var pass = ["pass1", "pass2", "pass3", "pass4", "pass5"];
var master = ["pass1" "pass2", "pass3", "pass4", "pass5"];
for (var i=0; i < pass.length; i++){
if (( sPuffer == pass[i]) ){
correct = 1;
break;
}else{
correct =0;
}
}
if(correct==1){
document.getElementsById('pass2').style.display='block';
document.getElementById('pass1').style.background="green";
document.getElementById('ausgabe').innerHTML="Ihre Eingabe ist Richtig, Bitte geben sie das Masterpasswort ein";
}else{
document.getElementById('pass1').style.background="red";
document.getElementById('ausgabe').innerHTML="Ihre Eingabe ist Falsch ";
}
}