Help! Retorno de cor, fonte e tamanho pelo javascript

26/09/2021

Ol� galera, estou aprendendo javascript, e estou com uma duvida:
Fiz o calculo do IMC, coloquei tamb�m se o sexo for feminino para retornar conforme os dados da OMS e se for masculino o mesmo, por�m como fa�o para que o retorno da mensagem seja com uma cor, tamanho e fonte de letra especifico, segue o c�digo:

"use strict";

document.querySelector("#botao").addEventListener("click", function(){
    calcularImc();
    
});


function calcularImc(){
    
    let altura = Number(document.querySelector("#txtaltura").value);
    let peso = Number(document.querySelector("#txtpeso").value);

    let imc = peso  / (altura*altura)
    document.querySelector("#txtimc").value = imc.toFixed(1);

    let sexo = 0;
    if (document.querySelector("#sexM")){
        sexo = 1;
    } else if (document.querySelector("#sexF")){
        sexo = 2;
    }
    
    let msg = conceitoImc (imc,sexo);
    document.querySelector("#txtcondicao").value = msg;
    

}

function conceitoImc (imc, sexo){
    let condicao = "";
    if (sexo == 1){
        if (imc < 20.7){
            condicao = "abaixo do peso";
            
       }else if (imc >= 20.7 && imc < 26.4){
            condicao = "no peso normal";
            
        }else if (imc >= 26.4 && imc < 27.8){
            condicao = "marginalmente acima do peso";
            
        }else if (imc >= 27.8 && imc < 31.1){
            condicao = "acima do peso ideal";
            
        }else{
            condicao = "obeso";
            
        }
        
    } else{
        if (imc < 19.1){
            condicao = "abaixo do peso"	;
        }else if (imc >= 19.1 && imc < 25.8){
            condicao = "no peso normal";
        }else if (imc >= 25.8 && imc < 27.3){
            condicao = "marginalmente acima do peso";
        }else if (imc >= 27.3 && imc < 32.3){
            condicao = "acima do peso ideal";
        }else{
            condicao = "obeso";
        }
        
    }
    return condicao;
    
    
    

}

[code=xml]<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <main>

         <table>
            <tr>
                <th>Condi��o</th>
                <th>IMC em Mulheres</th>
                <th>IMC em Homens</th>
            </tr>
            <tr>
                <td>abaixo do peso</td>
                <td>< 19,1</td>
                <td>< 20,7</td>
            </tr>
            <tr>
                <td>no peso normal</td>
                <td>19,1�-�25,8</td>
                <td>20,7�-�26,4</td>
            </tr>
            <tr>
                <td>marginalmente acima do peso</td>
                <td>25,8�-�27,3</td>
                <td>26,4�-�27,8</td>
            </tr>
            <tr>
                <td>acima do peso ideal</td>
                <td>27,3�-�32,3</td>
                <td>27,8�-�31,1</td>
            </tr>
            <tr>
                <td>Obeso</td>
                <td> > 32,3</td>
                <td> > 31,1</td>
            </tr>
        </table>
        <hr>

        <form>
            Altura:<input type="text" id="txtaltura"><br>
            Peso:<input type="text" id="txtpeso"><br>
            Sexo:<br>
            <input type="radio" value="masculino" id="sexM" name="sexo">Masculino <br>
            <input type="radio" value="feminino" id="sexF" name="sexo">Feminino<br>
            Seu IMC � : <input type="text" id="txtimc" readonly><br>
            Sua condi��o : <input type="text" id="txtcondicao" readonly><br>
            <button type="button" id="botao">Calcular</button> 
        </form>

    </main>
    <script src="js/exercicio7.js"></script>

</body>

</html>

[/code]

Gabriela Rezende

Curtir t�pico + 1

Responder

Post mais votado

27/09/2021

Ol� Srtaverdant, tamb�m estou aprendendo javascript e acho que posso te ajudar.

Nesse caso o seu retorno est� acontecendo dentro do input#txtcondicao e para estilizar esse input basta incluir a estiliza��o necess�ria dentro do seu arquivo style.css, um exemplo seria:

input#txtcondicao { color: green; font-family: Arial, sans-serif; }

Agora caso o que voc� esteja querendo fazer � criar uma estiliza��o espec�fica para cada tipo de resultado, existem algumas formas de fazer isso, ao meu ver, seria mais f�cil simplesmente adicionar essa estiliza��o na pr�pria fun��o conceitoImc() atrav�s dos eventos da DOM, ficaria mais ou menos assim:

function conceitoImc (imc, sexo){
    let condicao = "";
    if (sexo == 1){
        if (imc < 20.7){
            condicao = "abaixo do peso";
            document.querySelector('input#txtcondicao').style.color="green";
             
       }else if (imc >= 20.7 && imc < 26.4){
            condicao = "no peso normal";
            document.querySelector('input#txtcondicao').style.color="red";            
[...]

(no c�digo acima eu adicionei somente nos dois primeiros resultados masculinos, abaixo do peso e no peso normal)

� o m�todo mais simples que eu consigo pensar para fazer essas estiliza��es funcionarem, apesar de eu achar que existem outras que seriam semanticamente melhores, por exemplo criar classes direto no CSS com as estiliza��es que voc� quer e depois, baseado no resultado da fun��o, adicionar a classe dinamicamente pelo javascript, a propriedade para adicionar classes com javascript puro � a classList, a documenta��o da W3Schools �: https://www.w3schools.com/jsref/prop_element_classlist.asp

Ressalto que tamb�m estou aprendendo e quem sabe voc� encontre maneiras melhores para chegar no mesmo resultado, espero que tenha conseguido te ajudar.

Abra�o,

Matheus Formigari

Como voc� adicionou no assunto do t�pico que quer estilizar, fonte, cor e tamanho, decidi complementar o c�digo que eu tinha enviado antes, para alterar essas tr�s propriedades ficaria:

function conceitoImc (imc, sexo){
    let condicao = "";
    if (sexo == 1){
        if (imc < 20.7){
            condicao = "abaixo do peso";
            document.querySelector('input#txtcondicao').style.color="green";
            document.querySelector('input#txtcondicao').style.fontFamily="Arial";
            document.querySelector('input#txtcondicao').style.fontSize="32px";         
[...]

PS: Dessa vez estilizei s� a primeira condi��o, "abaixo do peso".

Uma op��o tamb�m seria, ao inv�s de se referir ao input chamando ele todas as vezes pelo querySelector, voc� pode criar uma vari�vel e depois usar ela para estilizar dependendo do resultado da fun��o, ficaria assim:

function conceitoImc (imc, sexo){
    let condicao = "";
    let retorno = document.querySelector('input#txtcondicao') //criando a vari�vel que vai armazenar o retorno da fun��o
    if (sexo == 1){
        if (imc < 20.7){
            condicao = "abaixo do peso";
            retorno.style.color="green"; //estilizando o retorno atrav�s da vari�vel
            retorno.style.fontFamily="Arial";
            retorno.style.fontSize="62px";               
[...]

Espero que tenha ajudado, abra�o,

Matheus Formigari

Matheus Formigari

Responder

Gostei + 2

Mais Posts

27/09/2021

Matheus Formigari

input#txtcondicao { color: green; font-family: Arial, sans-serif; }

function conceitoImc (imc, sexo){
    let condicao = "";
    if (sexo == 1){
        if (imc < 20.7){
            condicao = "abaixo do peso";
            document.querySelector('input#txtcondicao').style.color="green";
             
       }else if (imc >= 20.7 && imc < 26.4){
            condicao = "no peso normal";
            document.querySelector('input#txtcondicao').style.color="red";            
[...]

Responder

Gostei + 1