1
respuesta

Duda

Referente al curso JavaScript: Introducción al lenguaje de la web, en el capítulo Arrays, Loop y Estilos y actividad Estilos con JavaScript

por Estudiante
| 62.4k xp | 72 posts

No puedo modificar el color a través del CSS, ayuda:

var pacientes = document.querySelectorAll(".paciente");
console.log(pacientes);

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

    var paciente = pacientes[i];

    var tdpeso = paciente.querySelector(".info-peso");
    var peso = tdpeso.textContent;

    //La variable paciente se vuelve en un elemento padre, por el cual podremos acceder elementos hijos 

    var tdAltura = paciente.querySelector(".info-altura");
    var altura = tdAltura.textContent;

    var tdIMC = paciente.querySelector(".info-imc");
    // imc = peso / altura * altura
    var imc = peso / (altura * altura);
    tdIMC.textContent = imc;
    //textContent: Permite acceder al contenido, en este caso de mi class

    var pesoValidado = true; // asumiendo de buena fe que el peso es correcto
    var alturaValidada = true; // asumiendo de buena fe que la altura es correcta 



    // || Sígnifica OR (o) en operador lógico
    if((peso < 0) || (peso > 1000)){

        tdIMC.textContent = "Peso incorrecto!";
        pesoValidado = false;
        paciente.classList.add("paciente-incorrecto");
    }

    if((altura < 0) || (altura > 3.00)){

        tdIMC.textContent = "Altura incorrecta!";
        alturaValidada = false;
        paciente.style.backgroundColor = "lightcoral";
    }

    if(pesoValidado && alturaValidada){
        tdIMC.textContent = imc.toFixed(2);
    }



}

Este es el CSS

.paciente-incorrecto{
    background-color: blue;
}
1 respuesta
por Ignacio Nicolas Shishko
| 111.6k xp | 71 posts
Soporte Tecnico

Hola Alumno. Eso pasa por la Especifidad. Esto seria el peso que tienen la modificaciones de CSS. Si bien CSS va a dejar el ultimo estilo declarado para un elemento. Si un elemento tiene una especifidad (peso) mas alta por mas que despues modifiques el mismo estilo con un selector de especifidad (peso) mas baja.

Para solucionar tu problema. Si mal no entiendo te recomendaria la siguiente opcion.

Al CSS agreagar 

.paciente-altura-incorrecta{
    background-color: lightcoral;
}

Al if que compara la altura cambiarlo por el siguiente

if((altura < 0) || (altura > 3.00)){
        tdIMC.textContent = "Altura incorrecta!";
        alturaValidada = false;
        paciente.classList.add("paciente-altura-incorrecta");
    }

Por otro lado tendrias que remover la otra case en cada interaccion quedando

if((altura < 0) || (altura > 3.00)){
        tdIMC.textContent = "Altura incorrecta!";
        alturaValidada = false;
        paciente.classList.add("paciente-altura-incorrecta");
        if (paciente.classList.contains(".paciente-incorrecto")){
            paciente.classList.remove("paciente-incorrecto");
        }
    }

Para el peso tendrias que modificar lo mismo pero con sus respectivas clases.

Espero te sirva. Saludos