Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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'; document.getElementsByClassName('.planos').style.backgroundColor == '#f44336';
}
</script>>
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!
2) value não é um atributo original de div
Para adicionar atributos à um elemento html use data-attributes: https://developer.mozilla.org/pt-BR/docs/Learn/HTML/Howto/Use_data_attributes
<!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>
>
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>
Muito obrigado, tetsuo ! Ficou muito bom e já adicionei ao código!
Sou muito grato pela sua ajuda e lhe desejo muito sucesso!
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ã.