How to change background color according to value

Question

How to change background color according to value

Navigation

#1 by (4 votes)

1

I have created a script to count characters of a textarea in JavaScript, the code is this:

<div>
    <p class="texto-cont">Restam <span id="cont">2.200</span> caracteres</p>
</div>

function limite_textarea(valor) {
    quant = 2200;
    total = valor.length;
    if(total <= quant) {
        resto = quant - total;
        document.getElementById("cont").innerHTML = resto;
    } else {
        document.getElementById("texto").value = valor.substr(0,quant);
    }
}

I need to change the background of the excerpt "2,200 characters remaining" . When you are in 2,200, you would like the background to be green, orange in 2000, and red in 100 characters.

javascript css

asked by anonymous 25.10.2018 / 07:51

1 answer

What is the difference between these two types of standard definition? [duplicate] Show button when checking checkbox

score 4 · Accepted Answer

Just use a if or ternary operation and use the element.style.backgroundColor property.

Example:

/**
 * Captura os elementos
 */
const content = document.querySelector("#content")
const count = document.querySelector("#count")

/**
 * Utiliza o evento "input" para detectar novas alterações no textarea
 */
content.addEventListener("input", () => {

  /**
   * Captura o valor do atributo "maxlength" e 
   * calcula a quantidade restantes de caracteres
   */
  let maxLength = parseInt(content.getAttribute('maxlength'))
  let charRemaining = maxLength - content.value.length
  
  /* Converte o valor para pt-BR (Adiciona o "." em caso de milhar) */
  count.textContent = charRemaining.toLocaleString()
  
  /**
   * Utiliza uma operação ternária para verificar a quantidade de caracteres restantes
   * Se a qnt. restante for maior que 2190 => Verde, caso contrário realiza outra opção ternária
   * Se a qnt. restante for maior que 2180 e menor que 2190 => Laranja, caso contrário utiliza o vermelho
   */
  count.style.color = charRemaining > 2190 ? 'green' : charRemaining > 2180 ? 'orange' : 'red'
  content.style.backgroundColor = charRemaining > 2190 ? '#00800026' : charRemaining > 2180 ? '#ffa50026' : '#ff000026'
})

content.dispatchEvent(new Event("input"))

<div>
  <textarea id="content" rows="10" maxlength="2200"></textarea>
	<p class="texto-cont">Restam <span id="count"></span> caracteres</p>
</div>

If you use a plugin for WYSIWYG or similar, it must allow you to "hear" some events like keydown , keyup , input etc. It will not always happen. In the example below, I'll use the emojionearea project, but it may not work with others.

Example commenting:

const maxLength = 2200
const emojionearea = $("#emojionearea1").emojioneArea({
  events: {
    /**
     * Informa a função callback do evento 'keyup'
     * Caso queira utilizar outro evento, basta dá
     * uma olhada na documentação:
     * https://github.com/mervick/emojionearea#events
     */
    keyup: (editor) => { charRemaining(editor[0]) }
  }
})


function charRemaining(editor) {
  /**
   * Captura o valor do atributo "maxlength" e 
   * calcula a quantidade restantes de caracteres
   */
  let charRemaining = maxLength - editor.textContent.length

  /* Converte o valor para pt-BR (Adiciona o "." em caso de milhar) */
  count.textContent = charRemaining.toLocaleString()

  /**
   * Utiliza uma operação ternária para verificar a quantidade de caracteres restantes
   * Se a qnt. restante for maior que 2190 => Verde, caso contrário realiza outra opção ternária
   * Se a qnt. restante for maior que 2180 e menor que 2190 => Laranja, caso contrário utiliza o vermelho
   */
  count.style.color = charRemaining > 2190 ? 'green' : charRemaining > 2180 ? 'orange' : 'red'
  count.style.backgroundColor = charRemaining > 2190 ? '#00800026' : charRemaining > 2180 ? '#ffa50026' : '#ff000026'
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.min.css" rel="stylesheet"/>

<div class="row">
  <div class="span6">
    <textarea id="emojionearea1"></textarea>
  </div>
  
  <p class="texto-cont">Restam <span id="count">2.200</span> caracteres</p>
</div>