Ir para conteúdo
Giovanird

Cor da div conforme o valor do value

Por , em Javascript

Recommended Posts

Giovanird    0

Giovanird
Postado

Olá a todos!
tenho varias divs com o mesmo ID e nome de classe. Preciso que a cor da div seja conforme uma escala de valores.
Estou tentando pegar o valor pelo nome da classe, pois as divs possuem o mesmo id e não tive sucesso. Segue script: 


<div class="planos" id="1" value="74">74</div>
<div class="planos" id="1" value="29">29</div>
<div class="planos" id="1" value="55">55</div>
<div class="planos" id="1" value="74">74</div>
<div class="planos" id="1" value="63">63</div>
<div class="planos" id="1" value="55">55</div>


<script type="text/javascript">

var valueElement = document.getElementsByClassName('.planos').getAttribute('value');
console.log(valueElement);

if (valueElement >= "70") {
    document.getElementsByClassName('.planos').style.backgroundColor == '#4caf50';
} else if (valueElement >= "50" && valueElement <= "69") {
    document.getElementsByClassName('.planos').style.backgroundColor == '#ffbc00';
} else {
    document.getElementsByClassName('.planos').style.backgroundColor == '#f44336';
}
</script>

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

tetsuo    0

tetsuo
Postado

1) id, significa identidade.
Pense em você e mais x pessoas com a mesma identidade.
Pode acontecer alguma confusão.
Pode acontecer algum problema, né?
ids devem ser únicas e irrepetíveis.

Vou sair. Te escrevo uma sugestão amanhã.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovanird    0

Giovanird
Postado
10 horas atrás, tetsuo disse:

1) id, significa identidade.
Pense em você e mais x pessoas com a mesma identidade.
Pode acontecer alguma confusão.
Pode acontecer algum problema, né?
ids devem ser únicas e irrepetíveis.

Vou sair. Te escrevo uma sugestão amanhã.

Muito obrigado pelo retorno tetsuo, fico no aguardo!

Compartilhar este post

Link para o post
Compartilhar em outros sites

tetsuo    0

tetsuo
Postado 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Set backgroundColor by data-value</title>
  <style>
    .bg-danger {
      background-color: #f44336
    }

    .bg-warning {
      background-color: #ffbc00
    }

    .bg-success {
      background-color: #4caf50
    }
  </style>
</head>

<body>
  <main>
    <div class="planos" data-value="74">74</div>
    <div class="planos" data-value="29">29</div>
    <div class="planos" data-value="55">55</div>
    <div class="planos" data-value="74">74</div>
    <div class="planos" data-value="63">63</div>
    <div class="planos" data-value="55">55</div>
  </main>

  <script>
    // define as divs que terão background definidos
    const divsPalanos = document.querySelectorAll('div.planos')

    // para cada div.planos encontrada
    for (const div of divsPalanos) {
      // define o data-value da div
      const divValue = div.dataset.value
      // ou pode definir direto do conteúdo da div, nem precisa declarar data-attribute
      // const divValue = div.innerText

      if (divValue > 70) {
        div.classList.add('bg-success')
      } else if (divValue > 49 && divValue <= 70) {
        div.classList.add('bg-warning')
      } else {
        div.classList.add('bg-danger')
      }
    }
  </script>
</body>

</html>

 

image.png.b51a106886b37c4d4d6b82adf507343e.png

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovanird    0

Giovanird
Postado
14 horas atrás, tetsuo disse: 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Set backgroundColor by data-value</title>
  <style>
    .bg-danger {
      background-color: #f44336
    }

    .bg-warning {
      background-color: #ffbc00
    }

    .bg-success {
      background-color: #4caf50
    }
  </style>
</head>

<body>
  <main>
    <div class="planos" data-value="74">74</div>
    <div class="planos" data-value="29">29</div>
    <div class="planos" data-value="55">55</div>
    <div class="planos" data-value="74">74</div>
    <div class="planos" data-value="63">63</div>
    <div class="planos" data-value="55">55</div>
  </main>

  <script>
    // define as divs que terão background definidos
    const divsPalanos = document.querySelectorAll('div.planos')

    // para cada div.planos encontrada
    for (const div of divsPalanos) {
      // define o data-value da div
      const divValue = div.dataset.value
      // ou pode definir direto do conteúdo da div, nem precisa declarar data-attribute
      // const divValue = div.innerText

      if (divValue > 70) {
        div.classList.add('bg-success')
      } else if (divValue > 49 && divValue <= 70) {
        div.classList.add('bg-warning')
      } else {
        div.classList.add('bg-danger')
      }
    }
  </script>
</body>

</html>

 

image.png.b51a106886b37c4d4d6b82adf507343e.png

Muito obrigado, tetsuo ! Ficou muito bom e já adicionei ao código!
Sou muito grato pela sua ajuda e lhe desejo muito sucesso!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • ILR master
      Carregamento preloading
      Por ILR master
      Fala pessoal, tudo bem?
       
      Tô tentando fazer um pre-loading, mas não consigo de jeito algum.
      Quero mostrar uma animação enquanto a página é carregada e depois de caregada, esconder a animação e mostrar conteúdo.
       
      Aguém pode me ajudar?
       
      Segue código abaixo
       
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
          <title>PÁGINA LOAD</title>

      <style type="text/css">
      .loadclass {
          border: 2px solid #f3f3f3; /* Light grey */
          border-top: 4px solid #ffc401; /* Blue */
          border-radius: 50%;
          width: 50px;
          height: 50px;
          animation: spin 2s linear infinite;
      }
      @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }
      .conteudo {
          display:none;
      }
      </style>
      <script>
          function loading(){
              document.getElementsByClassName('loadclass')[0].style.display="none";
              document.getElementsByClassName('conteudo').style.display="block";
          }
      </script>
      </head>
      <body onLoad="loading()">
      <div class="loadclass"></div>
      <div class="conteudo">SEU CONTEUDO AQUI DENTRO!!!</div>
      </body>
      </html>
    • ILR master
      Abrir url na mesma janela
      Por ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • Giovanird
      Atualizar pagina PHP que esta dentro de uma div
      Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Thiago Duarte
      Drag and Drop para arrastar imagem
      Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • belann
      Upload de arquivos com javascript
      Por belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito