-4
var btnSoma = document.querySelector("#btnSoma")
var btnSubtrai = document.querySelector("#btnSubtrai")
var currentNumberWrapper = document.getElementById('currentNumber');

var currentNumber = 0;

btnSoma.addEventListener("click", function incremento() {
    currentNumber++
    currentNumberWrapper.innerHTML = currentNumber;
    return
})

btnSubtrai.addEventListener("click", function decrement(){
    currentNumber--
    currentNumberWrapper.innerHTML = currentNumber;
    return 
})

console.log(currentNumber)

if (currentNumber < 0){
    document.getElementById('currentNumber').style.color="#ca6567";
}

Não estou sabendo como alterar a variável "CurrentNumber"

1
  • 1
    A cor vermelha é comumente usada para indicar entrada inválida. As pessoas que têm certos tipos de daltonismo serão incapazes de determinar o estado da entrada, a menos que seja acompanhada por um indicador adicional que não dependa da cor para transmitir significado. Normalmente, texto descritivo e/ou um ícone são usados. Commented 29/06/2022 às 18:29

1 Resposta 1

-3

Algo assim resolveria:

function verify(params) {
  if (currentNumber < 0){
    currentNumberWrapper.style.color="#ca6567";
  } else {
    currentNumberWrapper.style.color="#000";
  }
}

Basta chamar essa função em cada eventListener:

btnSoma.addEventListener("click", () => {
  currentNumber++;
  currentNumberWrapper.innerHTML = currentNumber;
  verify()
})

btnSubtrai.addEventListener("click", () => {
  currentNumber--;
  currentNumberWrapper.innerHTML = currentNumber;
  verify()
})

Nesse caso a Arrow Function nos eventListeners deixa o código mais legível.

() => {}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .