Entrar Ainda não tem acesso?
7
respostas

Dúvida no Ex. 3 da Aula 4 - Coleções e loops

Referente ao curso JavaScript : Programando na linguagem da web, no capítulo Coleções e loops e atividade Utilizando um Loop para construir os pacientes

por Henrique Alves Salguero
| 36.3k xp | 3 posts

Olá pessoal, fiz um código um pouco diferente mas está acontecendo algum problema e não tenho a resposta. Quando faço o seguinte código ele dá certo:

var pacientes = [1, 2];

var nome = document.getElementsByClassName("info-nome");
var peso = document.getElementsByClassName("info-peso");
var altura = document.getElementsByClassName("info-altura");

for (var i=0; i < pacientes.length; i++) {

pacientes[i] = {nome: nome[i].textContent, peso: peso[i].textContent, altura: altura[i].textContent};

if(pacientes[i].altura != i){
      var imc = pacientes[i].peso / (pacientes[i].altura * pacientes[i].altura);
    document.getElementsByClassName("info-imc")[i].textContent = imc;
    }
    else {
       console.log("Não posso executar uma divisão por 0!");
}

}

Mas esse código não está automatizado, pois preciso criar a Array pacientes com o número de elementos que existem de pacientes. Na verdade, o que importa ai é o array.length para que o loop funcione. Portanto, se eu encontrar uma array na página que tenha o mesmo array.length que eu criei, o código deveria dar certo, não? Fiz isso trocando apenas a primeira linha do código para:

var pacientes = document.getElementsByClassName("paciente");

Sendo essa também um array de length = 2, o código deveria funcionar, mas por algum motivo ele não funciona. Resumindo, trocando a primeira linha do código ele deixa de funcionar. Por que isso? Obrigado!

Henrique

7 respostas
por Henrique Alves Salguero
| 36.3k xp | 3 posts

Há um erro no código que coloquei na linha do if. o correto é :

if(pacientes[i].altura != 0){
por Alberto Souza
| 2676.6k xp | 5740 posts
Instrutor Desenvolvedor e Instrutor

Oi Henrique, olhando assim não achei o erro.. estou assumindo que existem dois elementos marcados com a classe paciente. Pode colocar o erro que aparece no console do navegador?

por Henrique Alves Salguero
| 36.3k xp | 3 posts

Oi Alberto, desculpe por não postar o resultado nem o código HTML.

O HTML é esse:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Meus pacientes</title>
        <link rel="stylesheet" type="text/css" href="reset.css">
        <link rel="stylesheet" type="text/css" href="alura.css">
    </head>
    <body>
        <header>
            <div class="container">
                <h1>Meus pacientes</h1>
            </div>
        </header>
        <main class="container">
            <section>
                <h2>Meus pacientes</h2>
                <table>
                    <tr>
                        <th>Nome</th>
                        <th>Peso(kg)</th>
                        <th>Altura(m)</th>
                        <th>IMC</th>
                    </tr>
                    <tr class="paciente">
                        <td class="info-nome">Leonardo</td>
                        <td class="info-peso">57</td>
                        <td class="info-altura">1.67</td>
                        <td class="info-imc"></td>
                    </tr>
                    <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-imc"></td>
                    </tr>
                </table>
                <button id="calcula-imcs" class="botao ">Calcular Imcs</button>
            </section>
            <section>
                <h2>Adicionar novo paciente</h2>    
                <form>
                    <fieldset>
                        <label for="nome">Nome:</label>
                        <input id="campo-nome" type="text" placeholder="digite o nome do seu paciente">
                    </fieldset>
                    <fieldset class="campo-medio">
                        <label for="peso">Peso:</label>
                        <input id="campo-peso" type="text" placeholder="digite o peso do seu paciente">
                    </fieldset>
                    <fieldset class="campo-medio">
                        <label for="altura">Altura:</label>
                        <input id="campo-altura" type="text" placeholder="digite a altura do seu paciente">
                    </fieldset>
                    <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
                </form>
            </section>
        </main>
        <script src="calcula-imc.js"></script>
    </body>
</html>

Na verdade não retorna nenhum erro no console, mas ao invés de aparecer os IMCs dos pacientes, ele retorna NaN no lugar.

por Flavio Andrade Machado
| 111.4k xp | 7 posts
Analista de Sistemas

Olá Henrique!

Bem, posso dizer o que está acontecendo, e o meu entendimento do porque.

Peguei o seu código e testei da forma que descreve e percebi que o seguinte trecho de código é o problemático:

pacientes[i] = {nome: nome[i].textContent, peso: peso[i].textContent, altura: altura[i].textContent};

Acontece que no segundo caso essa atribuição não funciona. Se você verificar os valores de pacientes[i] após a atribuição verá que não mudou.

Isso me faz acreditar que o JavaScript trabalha com imutabilidade. E quando se usa comandos como getElementsByClassName ele te retorna um array imutável. O que explica também o primeiro caso funcionar, já que quando você faz:

var pacientes = [1, 2];

não é um array imutável.

por Nikolai Cinotti
| 433.6k xp | 424 posts
Alura Scuba Team

Henrique, conseguiu solucionar as suas dúvidas?

por João Paulo Souza
| 111.7k xp | 63 posts
Consultor Fluig

Boa noite, cara você confundiu um pouco objetos e arrays em javascript, na linha:

var pacientes = [1, 2];

Você esta criando um array.

Já na linha: 

pacientes[i] = {nome: nome[i].textContent, peso: peso[i].textContent, altura: altura[i].textContent};

Você esta tentando atribuir a uma posição do array um objeto.Você realmente quer criar um array de objetos?

objeto1 = { nome: "Meu Nome", idade:"Minha Idade"};
objeto2 = { nome: "Meu Nome", idade:"Minha Idade"};

arraydeObjetos = [ obejto1,objeto2 ];

Não sei se você deseja fazer isso, mas acredito que tenha se confundido um pouco.

por João Paulo Souza
| 111.7k xp | 63 posts
Consultor Fluig

Entenda a logica dos comandos utilizados na aula, e tente refazer a sua:

Primeiro tenho um html com vários pacientes, como posso identifica-lós , eles são tr's com a classe paciente

<tr class="paciente">

Logo eu sei que sempre que tiver uma tr com essa classe terei um paciente, então vamos guardar isso, jogar dentro de uma 'caixinha' (variável):

var meusPacientes = document.getElementsByClassName("Paciente");

O metodo getElementsByClassName da classe document, já me retorna automaticamente um array, logo eu tenho um array com todos meus pacientes certo, blz. Agora percorro esse array com um for ou while como você preferir.

for( var posicaoAtual = 0 ; posicaoAtual < meusPacientes.length; posicaoAtual++){

};

Preciso pegar os valores de cada paciente separadamente, ou seja, cada posição do array eu estarei me referindo a um paciente:

var trPeso = meusPacientes[posicaoAtual].getElementsByClassName("info-peso")[0];

var trAltura = meusPacientes[posicaoAtual].getElementsByClassName("info-altura")[0];

Agora sim eu posso criar um objeto, com os valores de cada paciente:

objetoPaciente = { peso: trPeso.textContent, altura:trAltura.textContent };

Pensando nisso, ajudou ai ?