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
}




obrigado pela ajuda pessoal, mais nenhum dos que vocês falaram funcionou...
è 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
}
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") ;
Código JS
Eu fiz o evento de click no código HTML
copie e cole este código que te mandei, teste
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;
}
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.