Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Manipulando o Dom

Referente ao curso JavaScript : Programando na linguagem da web, no capítulo Conhecendo o DOM e organizando nosso código com objetos e atividade Utilizando objetos

por Francisco Hugo
| 380.4k xp | 53 posts

Bom dia, Tenho uma duvida na condição do if do arquivo javascript.

if(altura !=0 || peso != 0){

    //console.log("valor peso: " + peso);
   var imc = peso / (altura * altura);

   var imcHTML = document.getElementById("imc-1");
    imcHTML.textContent = imc;

    //console.log("if");

}else{

    var imcHTML = document.getElementById("imc-1");
    imcHTML.textContent = "Altura ou peso não podem ser divididos por 0!";
    //console.log("else");    
}
<tr class="paciente">
                        <td class="info-nome">Leonardo</td>
                        <td class="info-peso" id="peso-1">0</td>
                        <td class="info-altura" id="altura-1">2.00</td>
                        <td class="info-imc" id="imc-1"></td>
                    </tr>

Coloquei o valor 0 no peso do primeiro paciente no html. No meu if no arquivo javascript eu utilizo || (estou querendo dizer se peso ou altura forem diferentes de 0, calcule o imc. Senão no campo imc, exiba uma mensagem de erro), o problema que não funciona, a condição não entra no else. Mas quando utilizo &&, funciona!

Gostaria de entender esse comportamento.

Obrigado.

6 respostas
por Vinícius Henrique
| 359.4k xp | 60 posts

Boa tarde francisco. Então, na hora de passar a condição para o if, tente extrair as condições em parenteses, assim ó:

if((altura !=0) || (peso != 0)){

} else {

}

Se não funcionar o erro pode estar na forma que você pega o conteúdo da pagina html

por Moderador
| 1073.3k xp | 1179 posts
Moderador

Olá Francisco! Quando você utiliza o operador OU ( II ) você está querendo dizer que uma das condições não sendo zero as instruções dentro do if serão executadas. Então, mesmo que você coloque zero no peso mas não coloque zero na altura as instruções dentro do if serão executadas.

Já quando você utiliza o operador E ( &&) as duas condições devem ser satisfeitas para que as instruções dentro do if sejam executadas.

É assim, as instruções dentro do if só vão ocorrer se a condição for verdadeira:

if(condição verdadeira) {
    // executa as instruções aqui
} else {// condição falsa
    // executa as instruções aqui
}

Quando temos os operadores OU ( II ) e E ( &&) eles funcionam da seguinte maneira:

  • condição 1 é verdadeira OU ( II ) condição 2 é verdadeira = resulta em verdadeira
  • condição 1 é verdadeira OU ( II ) condição 2 é falsa = resulta em verdadeira
  • condição 1 é falsa OU ( II ) condição 2 é verdadeira = resulta em verdadeira
  • condição 1 é falsa OU ( II ) condição 2 é falsa = resulta em falsa

Com o OU ( II ) somente será falsa a condição se as duas condições forem falsas.

Agora com o E ( &&) :

  • condição 1 é verdadeira E ( &&) condição 2 é verdadeira = resulta em verdadeira
  • condição 1 é verdadeira E ( &&) condição 2 é falsa = resulta em falsa
  • condição 1 é falsa E ( &&) condição 2 é verdadeira = resulta em falsa
  • condição 1 é falsa E ( &&) condição 2 é falsa = resulta em falsa

Com o E ( &&) somente será verdadeira a condição se as duas condições forem verdadeiras.

Entendeu?

por Francisco Hugo
| 380.4k xp | 53 posts

Obrigado pela resposta Vinícius,

Mas não funcionou, vou colocar o código completo pra se ajuda

index.html:

<!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" id="peso-1">0</td>
                        <td class="info-altura" id="altura-1">2.00</td>
                        <td class="info-imc" id="imc-1"></td>
                    </tr>
                    <tr class="paciente">
                        <td class="info-nome">Paulo</td>
                        <td class="info-peso" id="peso-2">100</td>
                        <td class="info-altura" id="altura-2">2.00</td>
                        <td class="info-imc" id="imc-2"></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>

calculaI_imc.js:

var Tpeso = document.getElementById("peso-1");
var peso = Tpeso.textContent;

var Taltura = document.getElementById("altura-1");
var altura = Taltura.textContent;

var paciente = {"peso" : peso, "altura" : altura};

if((paciente.altura != 0) || (paciente.peso != 0)){

    //console.log("valor peso: " + peso);
   var imc = paciente.peso / (paciente.altura * paciente.altura);

   var imcHTML = document.getElementById("imc-1");
    imcHTML.textContent = imc;

    //console.log("if");

}else{

    var imcHTML = document.getElementById("imc-1");
    imcHTML.textContent = "Altura ou peso não podem ser divididos por 0!";
    //console.log("else");    
}
por Francisco Hugo
| 380.4k xp | 53 posts

André Alexandre muito agradecido pela explicação.

Pelo que eu entendi,

utilizando || no if (no meu caso):

condição 1 == false || condição 2 == true //Verdade *Por isso as instruções do if serão executadas e não do else. Correto?

Mas eu sempre achei q se uma das condições sendo false utilizando o || dariam false no if, e como consequência executaria a instrução do else. Fiquei confuso kkkk

solução!
por Moderador
| 1073.3k xp | 1179 posts
Moderador

É isso mesmo Franciso, isso é mais lógica matemática do que programação, mas com a prática você não esquece mais. É só lembrar que ao usar o OU (II) só será falso se todas as condições forem falsas e ao usar o E (&&) só será verdadeiro se todas as condições forem verdadeiras.

Abraços e sucesso nos estudos!!

por Francisco Hugo
| 380.4k xp | 53 posts

Obrigado mesmo André, ajudou bastante! vlw