Moisés
Moisés21/07/2022 19:46
Compartilhe

Erro no contador

  • #CSS

Olá, eu tava fazendo o desafio do contador com addEventListener, mais não está funcionando, alguem pode me ajudar ?

código js :

let currentNumberWrapper = document.getElementById("currentNumber")

const btn1 = document.getElementsById("subtrair")

const btn2 = document.getElementsById("adicionar")

let currentNumber = 0

btn1.addEventListener("click", increment())

function increment() {

    currentNumber = currentNumber - 1

    currentNumberWrapper.innerHTML = currentNumber

}

btn2.addEventListener("click", decrement())

function decrement() {

    currentNumber = currentNumber + 1

    currentNumberWrapper.innerHTML = currentNumber

}

Compartilhe
Comentários (7)
Moisés
Moisés - 23/07/2022 17:06

obrigado pela ajuda pessoal, mais nenhum dos que vocês falaram funcionou...

Denise Melo
Denise Melo - 21/07/2022 20:26

è que vc está declarando a sua variável que receberá o evento do DOM depois de o ter declarado, assim quando vc clica no botão, aparece no console um erro de que não está encontrando nada , porque, devido ao escopo, a variável ainda não existe. Então, é so colocar a sua let currentNumber = 0 antes do const btn1=...

Ah! E trocar os sinais dos currentNumber -1 e +1, pois onde é para somar está subtraindo e vice versa! Ficaria assim:

let currentNumberWrapper = document.getElementById("currentNumber")

let currentNumber = 0


const btn1 = document.getElementsById("subtrair")


const btn2 = document.getElementsById("adicionar")






btn1.addEventListener("click", increment())




function increment() {


currentNumber = currentNumber + 1


currentNumberWrapper.innerHTML = currentNumber


}




btn2.addEventListener("click", decrement())




function decrement() {


currentNumber = currentNumber - 1


currentNumberWrapper.innerHTML = currentNumber


}

Ismael Lima
Ismael Lima - 21/07/2022 20:21

let currentNumberWrapper = document.getElementById("currentNumber")

const btn1 = document.getElementsById("subtrair") // erro e "getElementById()

const btn2 = document.getElementsById("adicionar") // erro e "getElementById()

let currentNumber = 0


//outro erro vc tem que chamar a function sem parenteses no parametro do addEventListener.


btn1.addEventListener("click"increment()) //erro parenteses

function increment() {

   currentNumber = currentNumber - 1

   currentNumberWrapper.innerHTML = currentNumber

}


btn2.addEventListener("click"decrement()) // erro parenteses


function decrement() {

   currentNumber = currentNumber + 1

   currentNumberWrapper.innerHTML = currentNumber

}



cara agora uma dica bônus, sempre no final de cada linha coloca ponto e virgula (;)

Ex: let variavel = 0 ;

console.log("teste") ;

José Souza
José Souza - 21/07/2022 20:08

Código JS


var currentNumberWrapper = document.getElementById('currentNumber');
var currentNumber = 0;

function increment(){
  currentNumber = currentNumber + 1;
  currentNumberWrapper.innerHTML = currentNumber;
}


function decrement(){
  currentNumber = currentNumber - 1;
  currentNumberWrapper.innerHTML = currentNumber;
}

Eu fiz o evento de click no código HTML

  <div id="counter">
      <button name="subtrair" onclick="decrement()">-</button>
      <span id="currentNumber">0</span>
      <button name="adicionar" onclick="increment()">+</button>
  </div>
Helberte Arruda
Helberte Arruda - 21/07/2022 20:07

copie e cole este código que te mandei, teste

Helberte Arruda
Helberte Arruda - 21/07/2022 20:07

var currentNumberWrapper = document.getElementById("currentNumber");

const btn1 = document.getElementById("subtrair");

const btn2 = document.getElementById("adicionar");


var currentNumber = 0;


btn1.addEventListener("click", decrement);

btn2.addEventListener("click", increment);


function increment() {

  currentNumber = currentNumber + 1;

  currentNumberWrapper.innerHTML = currentNumber;

}


function decrement() {

  currentNumber = currentNumber - 1;

  currentNumberWrapper.innerHTML = currentNumber;

}

Paulo Carvalho
Paulo Carvalho - 21/07/2022 20:05

Se não estiver saindo do 0, verifica os links que ligam o arquivo JS dentro do arquivo HTML. Clica no link, se abrir o aquivo linkado está tudo certo, agora se aparecer mensagem de arquivo não encontrado aí é só recriar o link ligando ao arquivo JS.