Help! Retorno de cor, fonte e tamanho pelo javascript
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:
[/code]
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> 
Gabriela Rezende
Curtidas 1
Melhor post
Matheus Formigari
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:
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:
(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
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
GOSTEI 2
Mais Respostas
Matheus Formigari
26/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:
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:
(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
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
GOSTEI 1