How to change background color according to value

Question

I built a script to count characters from 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 stretch "2,200 characters remain". When it’s at 2,200 I’d like you to background turned green, orange in 2000 and red in 100 characters.

Answer 1

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

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 any plugin for WYSIWYG or similar, it is necessary that this allows you to "listen" to some events such as keydown, keyup, input etc. This will not always happen. In the example below, I will use the project emojionearea, but 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>
<script src="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>