Boa tarde!
Meu problema agora é que o botão não responde ao click.
Por exemplo, quando o professor demonstra no vídeo o console.log(form.nome.value), no console do navegador aparece o valor digitado no input após o clique no botão, correto?
Quando eu faço isso, aparece uma mensagem vazia no console do navegador ao recarregar a página, indicando que o comendo console.log(form.nome.value) foi digitado corretamente, porém está vazio, como o padrão da página. Após clicar no botão, o valor não atualiza e o console do navegador não mostra mais nada, indicando que o clique do botão não está surtindo efeito.
O mesmo acontece quando sigo as instruções seguintes, e após fazer todos os comandos, o campi adicional em que deveria conter os dados do novo paciente, é preenchido em vazio logo ao recarregar a página, não sofrendo nenhuma alteração após digitar os dados e clicar no botão. Continua aparecendo apenas o campo novo vazio.
Segue o código Javascript:
var titulo = document.querySelector('#titulo-princ');
var pacients = document.querySelectorAll(".paciente");
for(i=0; i < pacients.length; i++){
var pacient = pacients[i];
var tdWeight = pacient.querySelector('.info-peso');
var tdHeight = pacient.querySelector('.info-altura');
var tdImc = pacient.querySelector('.info-imc');
var weight = tdWeight.textContent;
var height = tdHeight.textContent;
var imc = weight/(height*height);
var weightTrue = true;
var heightTrue = true;
if(weight <= 0 || weight > 600){
weightTrue = false;
tdImc.textContent = 'Peso inválido';
pacient.classList.add('paciente-invalido');
}
if(height <= 0 || height > 3){
heightTrue = false;
tdImc.textContent = 'Altura inválida';
pacient.classList.add('paciente-invalido');
}
if(weightTrue && heightTrue){
var imc = weight/(height*height);
tdImc.textContent = imc.toFixed(3);
}
}
titulo.addEventListener('click', function(){
console.log("Fui clicado!")
})
var addButton = document.querySelector('#adicionar-paciente');
addButton.addEventListener('click', function(event){
event.preventDefault();
})
var form = document.querySelector('#user-form');
var name = form.nome.value;
var weight = form.peso.value;
var height = form.altura.value;
var fat = form.gordura.value;
var pacientTr = document.createElement('tr');
var nameTd = document.createElement('td');
var weightTd = document.createElement('td');
var heightTd = document.createElement('td');
var fatTd = document.createElement('td');
nameTd.textContent = name;
weightTd.textContent = weight;
heightTd.textContent = height;
fatTd.textContent = fat;
pacientTr.appendChild(nameTd);
pacientTr.appendChild(weightTd);
pacientTr.appendChild(heightTd);
pacientTr.appendChild(fatTd);
var table = document.querySelector('#tabela-pacientes');
table.appendChild(pacientTr);