como adicionar classe com javascript no elemento html

Question

ol&aacute; eu criei no html varias div com a classe minha image, e dentro da div adicionei img e coloquei a imagem
por&eacute;m queria clicar na div e adicionar uma classe na div que cliquei, existe alguma maneira de fazer isso?

do jeito que fiz n&atilde;o importa se clico na imagem 1 ou 2 ou 3, sempre &eacute; adicionado a classe na div 1,
eu queria clicar na img 3 e a classe for adicionada somente na img 3, por&eacute;m sempre &eacute; adicionado a classe na
div 1.

existe alguma maneira de fazer com que seja adicionado somente na div que eu cliquei ou eu vou ter que criar uma fun&ccedil;&atilde;o diferente para cada elemento div?

eu fiz desse jeito: veja imagem anexada    &lrm;    &lrm;

Answer

Gabriel Roch... disse: existe alguma maneira de fazer com que seja adicionado somente na div que eu cliquei ou eu vou ter que criar uma fun&ccedil;&atilde;o diferente para cada elemento div?
Rapaz, existem v&aacute;rias maneiras de fazer! - Tantas que fica dif&iacute;cil determinar o melhor modo (algoritmo) aplic&aacute;vel: falo das regras CSS que determinam o comportamento da Div em rela&ccedil;&atilde;o &agrave; imagem, inclusive.

Pode ser completamente autom&aacute;tico, semi-autom&aacute;tico ou deixar tudo por conta do programador.

O modo mais f&aacute;cil &eacute; por conta do programador atrav&eacute;s da passagem de par&acirc;metro a cada chamada da fun&ccedil;&atilde;o
&lt;div onclick=aumentaimg(this).....
...
function aumentaimg(element) {
  ...
Neste caso 'element' chegar&aacute; diretamente, podendo ser removida a declara&ccedil;&atilde;o existente na fun&ccedil;&atilde;o.

O semi-autom&aacute;tico consiste em inserir e deixar um sinal ou aviso (flag) que identifique o 'element' para o Javascript.
&Eacute; mais trabalhoso porque al&eacute;m de escolher qual, onde e como o Javascript dever&aacute; capturar esse sinal que pode variar at&eacute; pelo design, porquanto afeta todos os elementos podendo inclusive inverter o comportamento nativo de cada um, conforme mencionado.
- Vamos supor que como 'sinal' se aplique um ID num&eacute;rico diferente para cada Div a qual contenha imagens e que as regras CSS n&atilde;o interfiram nos objetos em quest&atilde;o; nesse caso, tanto o clique nas imagens como nas Divs ser&atilde;o percebidos, certo? Deste modo, uma e outra dever&aacute; conter o sinal correspondente que ser&aacute; utilizado pelo JS.
&lt;div id=1 slot=1 onclick=aumentaimg()...&gt;
  &lt;img slot=1.....
...
function aumentaimg() {
  let alvo = event.target;
  let element = document.getElementById(alvo.slot);
  ...
Caso as Divs com imagens se encontrem dentro de um envelope exclusivo (container), no lugar da flag &eacute; poss&iacute;vel acessar diretamente por seu &iacute;ndice cada Div, como filhas deste (children, nodes, etc.) - Explica, como dito, que s&atilde;o variadas as possibilidades de acesso.

No modo totalmente autom&aacute;tico o comando &eacute; com o DOM:
&lt;div class=minhaimg&gt;
  ...
&lt;div class=minhaimg&gt;
  ...
&lt;div class=minhaimg&gt;
  ...

&lt;script&gt;
  let divList = document.querySelectorAll('.minhaimg');
  divList.forEach(el =&gt; el.addEventListener('click', aumentaimg));
  function aumentaimg() {
    let element = event.target;
    if (element.nodeName === 'IMG') element = element.parentNode;
    element.classList.toggle('aumentaimg1')
}
&lt;/script&gt;

Bom proveito!

Ferramentas

Mover Tópico