Manipulaçao de dados
Bom dia, estou com um trabalho da faculdade que preciso fazer um sistema de estacionamento, neste projeto possuo 4 telas html e uma para o srcitpt em js, o que eu estou com dificuldade é o seguinte: Na tela de entrada do usuario, ele digita a placa, modelo e quando ele clica em gerar notinha aparece as informaçoes digitadas e o script gera um bilhete aleatorio, como faço para linkar essa tela de entrada com a de saida, para que o cliente digite o numero do bilhete na tela de saida e ele compara com o gerado na tela de entrada?
JS:
var pl = document.querySelector(''input#placa'');
var mod = document.querySelector(''input#modelo'');
var dia = document.querySelector(''input#dia'');
var hour = document.querySelector(''input#tempo'');
const random = (num) => Math.floor(Math.random() * num);
function gerar(){
document.write("<strong>Carro:</strong>"+mod.value);
document.write("<br>");
document.write(''Placa: ''+pl.value);
document.write("<br>");
document.write(''Dia: ''+dia.value);
document.write("<br>");
document.write(''Hora: ''+hour.value);
document.write("<br>");
document.write("Bilhete: "+ random(1000));
document.style.backgroung = ''margin 10px'';
}
function verifica(){
var confirma = document.getElementById(''resposta'');
var verifica= document.getElementById(''check'');
if(verifica.value == random.value)
{
confirma.innerHTML=''Voce está liberado<br>Boa Volta para casa'';
}
Tela Entrada:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/styleCE.css" rel="stylesheet">
<title>Entrada</title>
<p align="center" class="logo"><img src="IMG/logo.jpg"> <br>
<br></head>
<body>
<br>
<br>
Placa:
<input type="text" name="Placa" id="placa">
</p>
<p align="center">Modelo:
<input type="text" name="modelo" id="modelo">
</p>
<p align="center">Dia:
<input type="date" name="dia" id="dia">
</p>
<p align="center">Hora:
<input type="time" name="tempo" id="tempo">
</p>
<p align="center">
<input name="botao" class="botao" type="button" onclick="gerar()" value="Gerar notinha" "
</p>
<div align="center" id="show"> NOTINHA: <br>
</div>
</body>
<div class="notinha">
<script src="Js/script.js"></script>
</div>
</html>
Tela Saida:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>CABINE DE SAIDA</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<div align="center"><section class="grupo"> <img src="IMG/logo.jpg"> </section></div>
<section class="grupo">
<div align="center" class="info">INFORME O CÓDIGO DO BILHETE
<input class="input" type="text" id="check">
</div>
<P align="center">
<P align="center">
<input type="button" value= "CONFRIMAR" onclick="verifica()">
<div align="center" class="result" id="resposta" name="resposta">
<p><strong>Resultado: </strong></p>
<br>
</div>
</section>
</body>
<script src="Js/script.js"></script>
</html>
JS:
var pl = document.querySelector(''input#placa'');
var mod = document.querySelector(''input#modelo'');
var dia = document.querySelector(''input#dia'');
var hour = document.querySelector(''input#tempo'');
const random = (num) => Math.floor(Math.random() * num);
function gerar(){
document.write("<strong>Carro:</strong>"+mod.value);
document.write("<br>");
document.write(''Placa: ''+pl.value);
document.write("<br>");
document.write(''Dia: ''+dia.value);
document.write("<br>");
document.write(''Hora: ''+hour.value);
document.write("<br>");
document.write("Bilhete: "+ random(1000));
document.style.backgroung = ''margin 10px'';
}
function verifica(){
var confirma = document.getElementById(''resposta'');
var verifica= document.getElementById(''check'');
if(verifica.value == random.value)
{
confirma.innerHTML=''Voce está liberado<br>Boa Volta para casa'';
}
Tela Entrada:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/styleCE.css" rel="stylesheet">
<title>Entrada</title>
<p align="center" class="logo"><img src="IMG/logo.jpg"> <br>
<br></head>
<body>
<br>
<br>
Placa:
<input type="text" name="Placa" id="placa">
</p>
<p align="center">Modelo:
<input type="text" name="modelo" id="modelo">
</p>
<p align="center">Dia:
<input type="date" name="dia" id="dia">
</p>
<p align="center">Hora:
<input type="time" name="tempo" id="tempo">
</p>
<p align="center">
<input name="botao" class="botao" type="button" onclick="gerar()" value="Gerar notinha" "
</p>
<div align="center" id="show"> NOTINHA: <br>
</div>
</body>
<div class="notinha">
<script src="Js/script.js"></script>
</div>
</html>
Tela Saida:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>CABINE DE SAIDA</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<div align="center"><section class="grupo"> <img src="IMG/logo.jpg"> </section></div>
<section class="grupo">
<div align="center" class="info">INFORME O CÓDIGO DO BILHETE
<input class="input" type="text" id="check">
</div>
<P align="center">
<P align="center">
<input type="button" value= "CONFRIMAR" onclick="verifica()">
<div align="center" class="result" id="resposta" name="resposta">
<p><strong>Resultado: </strong></p>
<br>
</div>
</section>
</body>
<script src="Js/script.js"></script>
</html>
Rafael
Curtidas 0