Incrementar contador ao clicar em imagem

Front-end JavaScript
#1

O objetivo é incrementar o contador ao clicar na imagem, mas não esta funcionando. Alguém pode me ajudar?index.html (558 Bytes)

JS
let counter = 0;

$('#cat-img').click(function(e) {
  counter++;
  $('#counter').text(counter);
});
#2

Você pode fazer assim:

Adiciona um onclick na imagem:

onclick="contadorClick()"

Js:

function contadorClick(){

document.getElementById("counter").innerHTML = parseInt(document.getElementById("counter").innerHTML) +1;
}
#3

no caso teria que usar o js dentro do html? pq não funcionou

#4

A imagem ficaria assim:

<img id="cat-img" src="img/cat.jpg" onclick="contadorClick()" alt="a cute baby cat looking to you">

O js pode usar dentro do html ou em um arquivo separado,eu pessoalmente prefiro usar em um arquivo separado pois fica mais organizado.

#5

também prefiro deixar separado.
Vc chegou a testar ai? Pq aqui não funcionou

#6

Eu testei aqui e funcionou.
Tenta colocar a função dentro do HTML.

<script>
function contadorClick(){

document.getElementById(“counter”).innerHTML = parseInt(document.getElementById(“counter”).innerHTML) +1;

}</script>

Salva e da um f5 no navegador, se funcionar o nome do seu arquivo .js está definido errado.

#7

p variar mais um erro bobo. Era o script do meu jquery.
Muito obrigado pela atenção.