Solucionado
Eu copiei e colei o seu código index.js e mesmo assim, quando eu clico em incluir ele faz todo o processo correto mas quando termina, ele mostra os dados e apaga em frações de segundos. Já debuguei e vi funcionar até a parte de escrever na tabela, mas quando acaba ele apaga o que foi escrito na tabela.
hoje, com a Alura e o Google Gemini
Pode ficar tranquilo alunos já passaram dessa parte sem problema nenhum problema Compartilhe o código para que eu possa ver.
Se você só copiou e colou, provavelmente não leu o parágrafo que fala para fazer event.preventDefault(). Aliás, no vídeo eu adiciono essa instrução também e ainda falo que sua ausência fará o formulário ser recarregado. Dá uma conferida meu aluno!
var campos = [ document.querySelector('#data'), document.querySelector('#valor'), document.querySelector('#quantidade') ];
var tbody = document.querySelector('table tbody');
document.querySelector('.form').addEventListener('submit', function(event) {
var tr = document.createElement('tr');
campos.forEach(function(campo) { var td = document.createElement('td'); td.textContent = campo.value; tr.appendChild(td); });
var tdVolume = document.createElement('td'); tdVolume.textContent = campos[1].value * campos[2].value;
tr.appendChild(tdVolume);
tbody.appendChild(tr);
campos[0].value = ''; campos[1].value = 1; campos[2].value = 0;
campos[0].focus();
});
insira seu código aqui
``````<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Negociações</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
</head>
<body class="container">
<h1 class="text-center">Negociações</h1>
<form class="form">
<div class="form-group">
<label for="data">Data</label>
<input type="date" id="data" class="form-control" required autofocus/>
</div>
<div class="form-group">
<label for="quantidade">Quantidade</label>
<input type="number" min="1" step="1" id="quantidade" class="form-control" value="1" required/>
</div>
<div class="form-group">
<label for="valor">Valor</label>
<input id="valor" type="number" class="form-control" min="0.01" step="0.01" value="0.0" required />
</div>
<button class="btn btn-primary" type="submit">Incluir</button>
</form>
<div class="text-center">
<button class="btn btn-primary text-center" type="button">
Importar Negociações
</button>
<button class="btn btn-primary text-center" type="button">
Apagar
</button>
</div>
<br>
<br>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>DATA</th>
<th>QUANTIDADE</th>
<th>VALOR</th>
<th>VOLUME</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
<script src="js/index.js"></script>
</body>
</html>
insira seu código aquiEntão, no texto do capítulo tem assim:
(...) Vamos recarregar a página e abrir o console. Ao preenchermos os campos com uma data aleatória, veremos que não aparecerá nada no console. Isso acontece, porque quando recarregamos a página, perdemos a tr. Por isso, adicionaremos o event.preventDefault(), assim indicaremos para o JavaScript que ele não submeta o formulário e evite que a página seja recarregada. Vemos que os valores aparecerão na tabela abaixo: (...)
Basta adicionar event.preventDefault() no seu código que o formulário não será recarregado.
Sucesso e bom estudo meu aluno!
Se quiser fazer uma revisão do event.preventDefault(), tem essa aula do curso de JavaScript que vem antes deste aqui avançado:
https://cursos.alura.com.br/course/javascript-programando-na-linguagem-web/task/24208
É um bom curso, muito bem explicado também.
Sucesso e bom estudo!
Então, como isso passou desapercebido por você, vou colocar a instrução no bloco de código. Fica melhor assim né...
Prontinho. Agora, se o aluno copiar e colar terá a versão do código atualizada como event.preventDefault().