Boa tarde
ao tentar remover uma linha de uma tabela, o JavaScript não está reconhecendo o duplo click e não está acontecendo a remoção. Aparentemente fiz tudo que o exercício pedia.
Obrigado
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Boa tarde
ao tentar remover uma linha de uma tabela, o JavaScript não está reconhecendo o duplo click e não está acontecendo a remoção. Aparentemente fiz tudo que o exercício pedia.
Obrigado
Boa tarde, André! Como vai?
Cole o seu código completo aqui para que eu possa dar uma olhada e te ajudar!
Além disso, vc olho o console do navegador para ver se é lançado algum erro? Se é lançado, qual é o erro?
Grande abraço e bons estudos!
Bom dia Gabriel, tudo bem? Obrigado pelo retorno. Não há erros de sintaxe, e agora a funcionalidade Filtrar nomes, também não funciona. Aqui não cabe todo o código, vou ver o quanto que eu consigo te passar. Muito obrigado!
*************** remove-paciente.js
var tabela = document.querySelector("table");
tabela.addEventListener("dblclick", function(event){
event.target.parentNode.classList.add("fadeOut");
setTimeout(function(){
event.target.parentNode.remove();
},500);
});
***********************form.js
var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click", function(event) {
event.preventDefault();
var form = document.querySelector("#form-adiciona");
var paciente = obtemPacienteDoFormulario(form);
var pacienteTr = montaTr(paciente);
var erros = validaPaciente(paciente);
if (erros.length > 0 ){
exibeMensagensDeErro(erros);
return;
}
var tabela = document.querySelector("#tabela-pacientes");
tabela.appendChild(pacienteTr);
form.reset();
});
function obtemPacienteDoFormulario(form){
var paciente = {
nome: form.nome.value,
peso: form.peso.value,
altura: form.altura.value,
gordura: form.gordura.value,
imc: calculaImc(form.peso.value, form.altura.value)
}
return paciente;
}
function montaTr(paciente){
var pacienteTr = document.createElement("tr");
pacienteTr.classList.add("paciente");
pacienteTr.appendChild(montaTd(paciente.nome, "info-nome"));
pacienteTr.appendChild(montaTd(paciente.peso, "info-peso"));
pacienteTr.appendChild(montaTd(paciente.altura, "info-altura"));
pacienteTr.appendChild(montaTd(paciente.gordura, "info-gordura"));
pacienteTr.appendChild(montaTd(paciente.imc, "info-imc"));
return pacienteTr;
}
function montaTd(dado,classe){
var td = document.createElement("td");
td.textContent = dado;
td.classList.add(classe);
return td;
}
function validaPaciente(paciente){
var erros = [];
if (paciente.nome.length == 0) {
erros.push("O nome não pode ser em branco");
}
if (paciente.gordura.length == 0) {
erros.push("A gordura não pode ser em branco");
}
if (paciente.peso.length == 0) {
erros.push("O peso não pode ser em branco");
}
if (paciente.altura.length == 0) {
erros.push("A altura não pode ser em branco");
}
if (!validaPeso(paciente.peso)) {
erros.push("Peso é inválido");
}
if (!validaAltura(paciente.altura)) {
erros.push("Altura é inválida");
}
return erros;
}
function exibeMensagensDeErro(erros) {
var ul = document.querySelector("#mensagens-erro");
ul.innerHTML = "";
erros.forEach(function(erro) {
var li = document.createElement("li");
li.textContent = erro;
ul.appendChild(li);
});
}*********** filtra.js
var campoFiltro = document.querySelector("#filtrar-tabela");
campoFiltro.addEventListener("input", function() {
var pacientes = document.querySelectorAll(".paciente");
console.log("entrou no filtrar");
if (this.value.length > 0) {
for (var i = 0; i < paciente.length; i++) {
var paciente = paciente[i];
paciente.classList.add("invisivel");
}
} else {
for (var i = 0; i < paciente.length; i++) {
var paciente = paciente[i];
paciente.classList.remove("invisivel");
}
}
});
***********calcular-imc.js
console.log("Fui carregado de um arquivo externo");
var titulo = document.querySelector(".titulo");
titulo.textContent = "Aparecida Nutricionista"
var pacientes = document.querySelectorAll(".paciente");
console.log(pacientes)
console.log("vai entrar no for")
console.log(pacientes.length)
for(var i = 0; i < pacientes.length ; i++){
var paciente = pacientes[i];
var tdPeso = paciente.querySelector(".info-peso");
var tdAltura = paciente.querySelector(".info-altura");
var tdImc = paciente.querySelector(".info-imc");
var peso = tdPeso.textContent;
var altura = tdAltura.textContent;
var alturaEhValida = validaAltura(altura);
var pesoEhValido = validaPeso(peso);
if (!pesoEhValido){
console.log("Peso inválido");
tdImc.textContent = "Peso inválido";
pesoEhValido = false;
paciente.classList.add("paciente-invalido");
}
if(!alturaEhValida){
console.log("Altura inválida");
tdImc.textContent = "Altura inválida";
alturaEhValida = false;
paciente.classList.add("paciente-invalido");
}
if(pesoEhValido && alturaEhValida){
var imc = calculaImc(peso,altura);
tdImc.textContent = imc;
}
function calculaImc(peso,altura){
var imc = 0;
imc = peso / (altura * altura);
return imc.toFixed(2);
}
function validaPeso(peso) {
if (peso > 0 && peso <= 1000) {
return true;
} else {
return false;
}
}
function validaAltura(altura) {
if (altura > 0 && altura <= 3.00){
return true;
} else {
return false;
}
}
}******** index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aparecida Nutrição</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<header>
<div class="container">
<h1 class="titulo">Aparecida Nutrição</h1>
</div>
</header>
<main>
<section class="container">
<h2>Meus pacientes</h2>
<label for="filtrar-tabela">//filtre:</label>
<input type="text" name="filtro" id="filtrar-tabela" placeholder="Digite o nome do paciente">
<table>
<thead>
<tr>
<th>Nome</th>
<th>Peso(kg)</th>
<th>Altura(m)</th>
<th>Gordura Corporal(%)</th>
<th>IMC</th>
</tr>
</thead>
<tbody id="tabela-pacientes">
<tr class="paciente" >
<td class="info-nome">Paulo</td>
<td class="info-peso">100</td>
<td class="info-altura">2.00</td>
<td class="info-gordura">10</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">João</td>
<td class="info-peso">80</td>
<td class="info-altura">1.72</td>
<td class="info-gordura">40</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">Erica</td>
<td class="info-peso">54</td>
<td class="info-altura">1.64</td>
<td class="info-gordura">14</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente">
<td class="info-nome">Douglas</td>
<td class="info-peso">85</td>
<td class="info-altura">3.00</td>
<td class="info-gordura">24</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">Tatiana</td>
<td class="info-peso">1500</td>
<td class="info-altura">1.55</td>
<td class="info-gordura">19</td>
<td class="info-imc">0</td>
</tr>
</tbody>
</table>
</section>
</main>
<section class="container">
<h2 id="titulo-form">Adicionar novo paciente</h2>
<ul id="mensagens-erro"></ul>
<form id="form-adiciona">
<div class="grupo">
<label for="nome">Nome:</label>
<input id="nome" name="nome" type="text" placeholder="digite 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" name="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>
</section>
// Restante do codigo HTML
<!--Importação doS JAVASCRIPTS AQUI -->
<Script src="js/calcular-imc.js"></script>
<Script src="js/form.js"></script>
<script src="js/remove-paciente.js"</script>
<script src="js/filtra.js"</script>
</body>
</html>********** index.css
*{
box-sizing: border-box;
}
body{
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 14px;
}
header{
background-color: #333;
height: 3em;
color: #FFF;
margin-bottom: 1em;
}
header h1{
font-size: 2em;
display:inline-block;
vertical-align: middle;
}
header h2{
font-size: 2em;
display:inline-block;
vertical-align: middle;
}
header .container:before{
content: '';
display:inline-block;
height: 100%;
vertical-align: middle;
}
.container{
width: 60%;
height: 100%;
margin: 0 auto;
}
section{
margin: 2em 0;
overflow: hidden;
}
section h2{
font-size: 3em;
display: block;
padding-bottom: .5em;
border-bottom: 1px solid #ccc;
margin-bottom: .5em;
}
table{
width: 100%;
margin-bottom : .5em;
table-layout: fixed;
}
td, th {
padding: .7em;
margin: 0;
border: 1px solid #ccc;
text-align: center;
}
th{
font-weight: bold;
background-color: #EEE;
}
label{
color: #555;
display: block;
margin-bottom: .2em;
}
.campo{
margin: 0;
padding-bottom: 1em;
width: 100%;
border: 1px solid #ccc;
padding: .7em;
width: 100%;
}
.campo-medio{
display: inline-block;
padding-right: .5em;
}
.grupo{
width: 32%;
display: inline-block;
padding: 10px 0px;
}
button{
padding: .5em 2em;
border: 0;
border-bottom: 3px solid;
font-size: 1.2em;
cursor: pointer;
margin: 0;
margin-top: -3px;
color: #fff;
background-color:#0c8cd3;
border-color: #04324c;
width: 20%;
display: block;
clear: both;
margin: 10px 0px;
}
button:active{
margin-top:0px;
border: 0;
}
button[disabled=disabled], button:disabled {
background-color: gray;
border-color: darkgray;
}
.adicionar-paciente{
margin-top: 30px;
}
.campo-invalido{
border: 1px solid red;
}
.paciente-invalido{
background-color: lightcoral;
}
#mensagens-erro{
color: red;
}
.fadeOut {
opacity: 0;
transition: 0.5s;
}
#filtrar-tabela {
width: 200px;
height: 35px;
margin-botton: 10px;
}
.invisivel {
display: none;
}Oi Gabriel, consegui te enviar tudo. Desde já, muito obrigado!!
Oi Gabriel, boa tarde! A remoção passou a funcionar, inexplicavelmente, pois não alterei nada...hehehe...mas, o filtro não está funcionando... Obrigado!
***filtra.js
var campoFiltro = document.querySelector("#filtrar-tabela");
campoFiltro.addEventListener("input", function() {
var pacientes = document.querySelectorAll(".paciente");
console.log("entrou no filtrar");
if (this.value.length > 0) {
for (var i = 0; i < paciente.length; i++) {
var paciente = paciente[i];
var tdNome = paciente.querySelector(".info-nome");
var nome = tdNome.textContent;
var expressao = new RegExp(this.value, "i");
if (expressao.test(nome)) {
paciente.classList.remove("invisivel");
} else {
paciente.classList.add("invisivel");
}
}
} else {
for (var i = 0; i < paciente.length; i++) {
var paciente = paciente[i];
paciente.classList.remove("invisivel");
}
}
});Boa noite, André! Como vai?
Repare que vc importou incorretamente os arquivos JavaScript esquecendo de fechar as duas últimas tags com >! E, embora não cause problema, também deixou de seguir a convenção de declarar as tags HTML com letras minúsculas.
<!--Importação doS JAVASCRIPTS AQUI -->
<Script src="js/calcular-imc.js"></script>
<Script src="js/form.js"></script>
<script src="js/remove-paciente.js"</script>
<script src="js/filtra.js"</script>O correto seria fazer:
<!--Importação doS JAVASCRIPTS AQUI -->
<script src="js/calcular-imc.js"></script>
<script src="js/form.js"></script>
<script src="js/remove-paciente.js"></script>
<script src="js/filtra.js"></script>Além disso, no seu arquivo filtra.js vc utiliza duas vezes uma variável chamada paciente que não existe. As duas vezes quando vc cria os dois laços for do seu código! O correto seria fazer pacientes.length, uma vez que pacientes é o array que guarda os pacientes da tabela.
Pegou a ideia?
Veja se com essas correções o seu código funciona como esperado e qualquer coisa é só falar!
Grande abraço e bons estudos!