How to check the id of an item in a class in Javascript?

Question

Basically I have a class, and every item in this class has a id, how do I check this id is equal to a specific value? and, if it detects such value, how to change to a different image?

My code is like this:

<img class="figuras id="quad" src="quadrado.jpg" onclick="trocaFigura()" alt = "quadrado" style = "width: 200px;">
<img class="figuras id="pen" src="pentagono.jpg" onclick="trocaFigura()" alt = "pentagono" style = "width: 200px;">
<img class="figuras id="tri" src="triangulo.jpg" onclick="trocaFigura()" alt = "triangulo" style = "width: 200px;">
<img class="figuras id="exa" src="exagono.jpg"   onclick="trocaFigura()" alt = "exagono" style = "width: 200px;">

<script>
function trocaFigura(){
    var form = document.getElementsByClassName("figuras");
    if()
}
</script>

Answer 1

Try this:

<img class="figuras id="quad" src="quadrado.jpg" onclick="trocaFigura(0)" alt = "quadrado" style = "width: 200px;">

<script>
  trocaFigura(indice){
    document.getElementsByClassName('nome_da_classe')[indice].id
  }
</script>

Basically, it lacked to take the index, since it is an array. You can do a foreach and check if the current element matches the value you want to test.

Another option that might work:

document.querySelector('.nome_da_classe').id

Remarks: getElementsByClassName Not supported by IE 6-8 and querySelector not supported by IE6-7 & FF3

Answer 2

Before answering your question, let me make a few remarks about her and her code:

• I don’t know if it was a typo, but you’re not closing the quotes on the attribute class, should be class="figuras";
• note that all elements have the same style, you can then pass the width: 200px to css and remove from element;
• "each item in this class has an id, as I do to check if this id is equal to a specific value", as all elements call the same Function, just pass the element inside the Function and will already have the ID :). So: onclick="trocaFigura(this)". In this case the this represents the very element that is triggering the event, that is, the element that was clicked. Note that you don’t even need the class, because in your code it was being used to find the images, but I kept taking advantage to do what a class should do, have styles, and put in it the width.

See below some changes based on the comments above:

// estou procurando pelo id "tri"
var idDesejado = "tri";

function trocaFigura(img) {
   // img é a variável que aponta para a imagem que disparou o evento, onde foi clicado, então "img.id" retorna o ID
   console.log(img.id);
   if (img.id == idDesejado) {
      console.log("mudando a imagem");
      // aqui, mudo o src, ou seja, a imagem
      img.src = "https://i.stack.imgur.com/cRKnY.png";
   }
}

.figuras {
  width: 200px;
}

<img class="figuras" id="quad" src="quadrado.jpg" onclick="trocaFigura(this)" alt="quadrado" />
<img class="figuras" id="pen" src="pentagono.jpg" onclick="trocaFigura(this)" alt="pentagono"/>
<img class="figuras" id="tri" src="triangulo.jpg" onclick="trocaFigura(this)" alt="triangulo"/>
<img class="figuras" id="exa" src="exagono.jpg"   onclick="trocaFigura(this)" alt="exagono"/>