Seguinte, tô querendo pegar os dados de um input e colocar dentro de um array, mas toda vez que eu envio o formulario fica aparecendo esse erro: 'Failed to load resource: the server responded with a status of 405 crbug/1173575, non-JS module files deprecated.'
Então eu fui criei uma nova pasta em outro lugar, novos arquivos e rodei. O problema anterior passou, mas agora ao enviar acontece isso : Resultado do ao clicar em submit
Gostaria que pudessem me explicar o motivo do primeiro erro e comor resolver com esse agora!
Código a seguir:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" href="../style/main.css">
<title>Document</title>
</head>
<body>
<section>
<h1>Insira seus dados</h1>
<form class="form" action="/" id="formulario" method="POST">
<label for="nome">Nome:</label>
<input type="text" checked id="nome" name="Nome">
<label for="sexo">Sexo:</label>
<input type="text" checked id="sexo" name="Sexo">
<label for="idade" aria-autocomplete="inline">Idade</label>
<input type="number" step=".01" checked id="idade" name="Idade">
<label for="altura">Altura</label>
<input type="number" step=".01" checked id="altura" name="Altura">
<label for="job">Profissão</label>
<input type="text" step=".01" checked id="job" name="Job">
<button id="submit" type="submit">Enviar</button>
</form>
</section>
<script src="../javascript/main.js"></script>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
:root {
--primary-color: rgb(17, 86, 102);
--primary-color-darker: rgb(9, 48, 56);
}
* {
box-sizing: border-box;
outline: 0;
}
body {
margin: 0;
padding: 0;
background: var(--primary-color);
font-family: 'Open sans', sans-serif;
font-size: 1.3em;
line-height: 1.5em;
}
section {
max-width: 640px;
margin: 50px auto;
background: #fff;
padding: 20px;
border-radius: 10px;
}
h1,h2 {
text-align: center;
}
form input, form label, form button {
display: block;
width: 100%;
margin-bottom: 10px;
}
form input {
font-size: 24px;
height: 50px;
padding: 0 20px;
border: 1px solid gray;
color: var(--primary-color);
}
form input:focus {
outline: 1px solid var(--primary-color);
}
form button {
border: none;
background: var(--primary-color);
color: #fff;
font-size: 18px;
font-weight: 700;
height: 50px;
cursor: pointer;
margin-top: 30px;
}
input[type='number'] {
-moz-appearance: textfield;
appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button {
-webkit-appearance: none;
}
label {
font-size: 18px;
font-weight: 700;
}
const form = document.querySelector("form");
form.addEventListener("submit", function (e) {
e.preventDefault;
});
function capturarDados() {
nome = document.querySelector("#nome");
sexo = document.querySelector("#sexo");
idade = document.querySelector("#idade");
altura = document.querySelector("#altura");
profissao = document.querySelector("#job");
const dados = [];
dados.push({
nome: nome.value,
sexo: sexo.value,
idade: idade.value,
altura: altura.value,
profissao: profissao.value,
});
}
capturarDados();