meu código fica exibindo no console propriedade value não foi definida, como fasso pra declara essa propriedade?
meu código fica exibindo no console propriedade value não foi definida, como fasso pra declara essa propriedade?
<!DOCTYPE html>
<html lang="pt.br">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="troca-de-turno.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pinyon+Script&display=swap">
<title>calculadora inteligente</title>
</head>
<body>
<header>
<h1>Ensira Seus Dados</h1>
</header>
<main>
<div>
<form>
<tbody>
<table>
<th>Dia</th>
<th>Horário</th>
</table>
</tbody>
<div class="caixa">
<label for="tati">Tati</label>
<input type="text" id="tati" required placeholder="horario de chegada">
<input type="submit" value="calcular" class="calcular">
</div>
</form>
</div>
<p>Esses campos são obrigatorios.</p>
</main>
<script src="turnos.js"></script>
</body>
</html>
body {
border: 5px solid pink;
text-align: center;
background: pink;
}
h1 {
text-align: center;
font-size: 50px;
}
th {
text-align: center;
position: relative;
top: 0px;
left: 560px;
font-size: 30px;
border: 2px solid pink;
border-radius: 19px;
}
.caixa {
text-align: center;
margin: 40px;
}
.calcular {
text-align: center;
display: block;
position: relative;
top: 0px;
left: 560px;
margin: 10px 0
}
label {
font-size: 25px;
margin: 10px;
border: solid pink;
border-radius: 5px;
padding: 0 12px;
}
label:hover {
cursor: pointer
}
input:hover {
cursor: pointer;
}
.calcular:hover {
cursor: pointer;
}
input {
border: solid pink;
border-radius: 12px;
}
p {
text-align: center;
font-size: 30px;
font-family: 'Pinyon Script', cursive;
}
var form = document.querySelector("form");
var value = value;
var nome = form.nome.value;
var funcionariath = document.createElement("th");
console.log(funcionariath)
Oi, Geovane, tudo bem?
Primeiro, sugiro fortemente que siga as orientações da documentação relacionada aos elementos form e input. Ambos tem propriedades necessárias que precisam ser declaradas para que você capture os valores:
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/form
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/input
Sobre o código, no form você precisa declarar o seu name e method para que seja validado pelo código javascript, segue:
<form name="calculadora" method="post">Da mesma forma, o name também precisa ser declarado no input em que deseja:
<input
name="hora"
type="text"
id="tati"
required
placeholder="horario de chegada"
/>Agora, no código JS, você pode capturar o valor que o usuário digitou:
var hora = document.calculadora.hora.value;
console.log(hora);Você pode manipular esse valor que foi digitado pelo usuário :}
Espero ter te ajudado!
ainda não deu!
<!DOCTYPE html>
<html lang="pt.br">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="troca-de-turno.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pinyon+Script&display=swap">
<title>calculadora inteligente</title>
</head>
<body>
<header>
<h1>Ensira Seus Dados</h1>
</header>
<main>
<div>
<form name="calculadora" method="post">
<tbody>
<table>
<th>Dia</th>
<th>Horário</th>
</table>
</tbody>
<div class="caixa">
<label for="tati">Tati</label>
<input type="text" id="tati" required placeholder="horario de chegada">
<input type="submit" value="calcular" class="calcular">
</div>
</form>
</div>
<p>Esses campos são obrigatorios.</p>
</main>
<script src="turnos.js"></script>
</body>
</html>
var form = document.querySelector("form");
var value = value;
var nome = document.calculadora.nome.value;
console.log(funcionariath)
oi tudo bem e você?
Oi, Geovane, tudo bem?
Faça os passos como te indiquei acima, na mensagem anterior, veja atentamente cada modificações que fiz e faça o teste. Seguindo a lógica do passo a passo acima , você poderá capturar os valores do seu form.
Testa e me fala :}
bom acho que meu código deve estar todo errado!