Pessoal, bom dia. Estou com uma dúvida relacionada ao comportamento padrão. Fiz um código um pouco diferente do que o instrutor sugeriu. Como já tinha feito o curso "Manipulando o DOM", dividi o código javascript em 3 partes: main.js, calcularImc.js e adicionarPaciente.js Neste cenário, não estou conseguindo utilizar o preventDefault(), sempre obtendo esse erro: Uncaught ReferenceError: evento is not defined Segue meus códigos main.js
import calcularImc from "./calcularImc.js";
import adicionarPaciente from "./adicionarPaciente.js";
const tituloPagina = document.querySelector(`h2`);
//O jeito recomendado, seria utilizando um data-attribute, mas para seguir o curso, vou usar a classe
//const paciente = document.querySelector(`[data-primeiro-paciente]`); //Criei um data-attribute e usei no query selector
const pacientes = document.querySelectorAll(`.paciente`); //Selecionando todos os itens que tem a classe paciente e retornando um array
pacientes.forEach((index) => { calcularImc(index) }); //iterando pelo array de pacientes para calcular o IMC. A palavra index pode ser substituida sem prejuizo a lógica
//Criando escutador para evento do clique do botão
const botaoAdicionar = document.querySelector(`[data-botao-adicionar]`);
//
botaoAdicionar.addEventListener(`click`, adicionarPaciente(evento));
adicionarPaciente.js
import calcularImc from "./calcularImc.js";
const adicionarPaciente = (evento) => {
evento.preventDefault();
//Selecionando elementos do cadastro de novos pacientes
const elementosAdd = document.querySelectorAll(`.campo`);
console.log(elementosAdd);
//Validação dos campos
if (elementosAdd[0].value == `` || elementosAdd[1].value == `` || elementosAdd[2].value == `` || elementosAdd[3].value == ``) {
alert(`Algum dado faltando!`)
return false;
} else {
const elTrAdicionar = document.createElement(`tr`);
elTrAdicionar.classList.add(`paciente`);
//Utilizando a query string para montar os dados da tabela
const elTdAdicionar = `<td class="info-nome">${elementosAdd[0].value}</td>
<td class="info-peso">${elementosAdd[1].value}</td>
<td class="info-altura">${elementosAdd[2].value}</td>
<td class="info-gordura">${elementosAdd[3].value}</td>
<td class="info-imc"></td>`;
elTrAdicionar.innerHTML = elTdAdicionar;
calcularImc(elTrAdicionar);
const tabelaInserir = document.querySelector(`[data-tabela-pacientes]`);
tabelaInserir.appendChild(elTrAdicionar);
}
}
export default adicionarPaciente;
Consegui resolver esse erro não passando parâmetros para a função adicionarPaciente e usando a palavra event (que apareceu riscada no visual studio code indicando que é código descontinuado. Fiz outra forma aqui foi criando uma função buttonHandler dentro do main.js, chamando ela no evento de clique e dentro da button handler, tratando o prevent default. Assim:
import calcularImc from "./calcularImc.js";
import adicionarPaciente from "./adicionarPaciente.js";
const tituloPagina = document.querySelector(`h2`);
//O jeito recomendado, seria utilizando um data-attribute, mas para seguir o curso, vou usar a classe
//const paciente = document.querySelector(`[data-primeiro-paciente]`); //Criei um data-attribute e usei no query selector
const pacientes = document.querySelectorAll(`.paciente`); //Selecionando todos os itens que tem a classe paciente e retornando um array
pacientes.forEach((index) => { calcularImc(index) }); //iterando pelo array de pacientes para calcular o IMC. A palavra index pode ser substituida sem prejuizo a lógica
const buttonHandler = (evento) =>{
evento.preventDefault();
adicionarPaciente();
}
//Criando escutador para evento do clique do botão
const botaoAdicionar = document.querySelector(`[data-botao-adicionar]`);
//
botaoAdicionar.addEventListener(`click`, buttonHandler);
Fiz o certo? Não consigo passar o evento para a minha função adicionarPaciente e trata-lo lá? O tratamento do evento tem que ser dentro do mesmo arquivo que o está chamando?