2
respostas

Problemas com querySelector()

Olá, boa noite.. tentando refinar meu código referente ao exercício do curso de construir o script de calcular IMC me deparei com um problema, quando faço a mudança de todos os getElementsByClassName por querySelector meu script da um pau no qual não aparece no quest log, o que acontece é que, os pacientes que já estão adicionados por padrão calculam o IMC de forma correta e retorna tanto na página, quanto no quest log, já os pacientes adicionados por mim não retornam o valor do IMC, HELP... segue abaixo o código.

//Adicionando a classe paciente num variável para ser listada
var paciente = document.querySelectorAll('.paciente');

//Função de listar itens
function Listar(item, retorno) {
  for (var i = 0; i < item.length; i++) {
    var retornaLista = item[i];
    retorno(retornaLista);
  }
}

//Função adicionar novo paciente
var  btnAdd = document.querySelector('#adicionar-paciente');
btnAdd.addEventListener('click',function addPaciente() {
  event.preventDefault();


  var campoNome = document.querySelector('#campo-nome');
  var campoPeso = document.querySelector('#campo-peso');
  var campoAltura= document.querySelector('#campo-altura');

  if (campoNome.value == '') {
    alert('preencha o campo de nome');
    return false;
  }
  else if (campoPeso.value == '' || campoPeso.value == 0) {
    alert('preencha o campo peso');
    return false;
  }
  else if (campoAltura.value == '' || campoAltura.value == 0) {
    alert('preencha o campo altura');
    return false;
  }

  var novoPaciente =     '<tr class="paciente">' +
      '<td class="info-nome">' + campoNome.value + '</td>'+
      '<td class="info-peso">' + campoPeso.value + '</td>'+
      '<td class="info-altura">' + campoAltura.value + '</td>'+
      '<td class="info-imc"></td>'+
    '</tr>';

  var tabela = document.querySelector('table');

  tabela.innerHTML = tabela.innerHTML + novoPaciente;

  campoNome.value = '';
  campoPeso.value  = '';
  campoAltura.value = '';
});

//Função de calcular e retornar IMC do paciente
var btnImc = document.querySelector('#calcula-imcs');
btnImc.addEventListener('click', function () {
  Listar(paciente, function retornaImc(retornaLista) {
      var pacientePeso = retornaLista.querySelector('.info-peso');
      var pacienteAltura = retornaLista.querySelector('.info-altura');

      var pacienteInfo = {
        peso: pacientePeso.textContent,
        altura: pacienteAltura.textContent,
        imc: function() {
          var result = this.peso / (this.altura * this.altura);
          return result;
      }
    };

    var retornaImc = retornaLista.querySelector('.info-imc');

    retornaImc.textContent = pacienteInfo.imc();

    console.log(pacienteInfo.imc());
  });
});
2 respostas

Pelo que eu vi do código, você está guardando todas as TRs numa variável global

var paciente = document.querySelectorAll('.paciente');

Como essa variável é carregada apenas ao abrir a página, quando você adiciona novos elementos ela não é atualizada.

Ou seja, antes de calcular o IMC, você precisa atualizar essa variável

var btnImc = document.querySelector('#calcula-imcs');
btnImc.addEventListener('click', function () {
    paciente = document.querySelectorAll('.paciente'); //Atualizando a lista de TRs

//Restante do seu código
});

Daniel, a variável está global seguindo a atividade, porém poderia sim ser local, agr creio q isso n influenciaria no resultado final, até pq se eu voltar a usar o getElementsByClassName na variável global o sistema volta a funcionar normalmente, imagino que seja alguma restrição do querySelectorAll ou algo assim, mas na documentação n achei nada...