A variável peso não estava funcionando, todas os outros campos sim, menos o peso Eu resolvi substituindo a variável peso, tanto no form do HTML, quanto no arquivo js, por outra qualquerQuando o código do formulário do html estava assim ( igual a aula)
<form id="form-adiciona">
<div>
<label for="nome">Nome</label>
<input id="peso" name="nome" type="text" placeholder="Digitem o nome do seu paciente" class="campo">
</div>
<div class="grupo">
<label for="peso">peso:</label>
<input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio">
</div>
<div class="grupo">
<label for="altura">Altura:</label>
<input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">
</div>
<div class="grupo">
<label for="gordura">% de Gordura:</label>
<input id="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
</div>
<button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
</form>
E o arquivo do javascritp estava assim. Como manda a aula.
var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click",function(event){
event.preventDefault();
var form = document.querySelector("#form-adiciona")
var nome = form.nome.value;
var peso = form.peso.value
var altura = form.altura.value;
var gordura = form.gordura.value;
console.log(nome);
console.log(peso);
console.log( altura);
console.log( gordura);
});
No console aparecem todos os valores menos o valor do peso. Ele não dá erro, somente aparece em branco. Se substituir no HTML o name="peso" para qualquer outra variável e fazer o mesmo no javascript como está abaixo
<form id="form-adiciona">
<div>
<label for="nome">Nome</label>
<input id="peso" name="nome" type="text" placeholder="Digitem o nome do seu paciente" class="campo">
</div>
<div class="grupo">
<label for="peso">peso:</label>
<input id="peso" name="XUXU" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio">
</div>
<div class="grupo">
<label for="altura">Altura:</label>
<input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">
</div>
<div class="grupo">
<label for="gordura">% de Gordura:</label>
<input id="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
</div>
<button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
</form>
JAVASCRIPT
var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click",function(event){
event.preventDefault();
var form = document.querySelector("#form-adiciona")
var nome = form.nome.value;
var peso = form.XUXU.value
var altura = form.altura.value;
var gordura = form.gordura.value;
console.log(nome);
console.log(peso);
console.log( altura);
console.log( gordura);
});
Tudo funciona normal. Por que??? Se estou usando o mesmo código do professor...