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
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!