Jump to content
rapa-013

Indentificar objetos HTML com JavaScript

Recommended Posts

Olá!

 

Estou com uma dúvida em JavaScript que não consigo resolver.

 

Contexto:

Em uma página HTML, tenho 10 imagens organizadas, de classe:

<img class='imagens-q'>

e id's de 0 à 9, respectivamente:

<img class='imagens-q' id='0'>
<img class='imagens-q' id='1'>
...
<img class='imagens-q' id='9'>

 

 

Objetivo:

Essas imagens ficam disponíveis para que o usuário escolha (clique) uma ou mais. Minha intenção é justamente obter o id do elemento que o usuário clicar.

 

Resumindo:

Como faço para saber o id da imagem na qual o usuário clicou?

 

OBS: não coloquei nenhum código em JS porque justamente ainda não tenho nenhum código.

Share this post


Link to post
Share on other sites

Basicamente: 

<div id="suadiv"></div>

<script>
  document.getElementById("suadiv").addEventListener("click", function( event ) {
    // mostra o contador de cliques dentro da div clicada
    event.target.innerHTML = "Total de cliques: " + event.detail;
  }, false);
</script>

Você só irá trocar o  .getElementById pelo .getElementsByClassName

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Acir190
      Olá,
      Tenho um script para enviar dados para uma tabela do Google Spreadsheet mas nao consigo faze-la gravar uma das variáveis. 
       
      function doGet(e){
        var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1QVJWghiG5TJh1UhQLiOujOFc1KBNGy82v59Rm5zdD4/edit#gid=0");
        //Give your Sheet name here
        var sheet = ss.getSheetByName("Folha1");
        insert(e,sheet);
      }
      function doPost(e){
        var ss = SpreadsheetApp.openByUrl("Your Spread Sheet URL");
        //Give your Sheet name here
        var sheet = ss.getSheetByName("Folha1");
        insert(e,sheet);
      }
      function insert(e,sheet){
       
        // reciving scanned data from client i.e android app
        var sdata = e.parameter.sdata;
        
        var date = new Date()
       
        Var acesso = 'E' //Não consigo enviar esta variável para a planilha

        sheet.appendRow([date,sdata,acesso]);
        
      }
    • By Mucio Willamys
      olá, gostaria da ajuda de vcs :
      este código traz as informações do banco de dados e as coloca dentro de um select html
      é parte de um projeto de um sistema de uma clínica médica, onde ao cadastrar os médicos posso escolher a especialidade do mesmo.
      <select name="especialidade" required="">                 <option value="" >--Escolha uma especialidade--</option>          <?php              $result_especialidade = "select * from especialidade";              $result_especialidade = mysqli_query($bd, $result_especialidade);              while ($row_especialidade = mysqli_fetch_assoc($result_especialidade)){ ?>                    <option value="<?php echo $row_especialidade['id']; ?>"><?php echo  $row_especialidade['nome']; ?> </option> public function editar($id){ include "Bd.class.php"; $nome = $this->nome; $cpf = $this->cpf; $crm = $this->crm; $especialidade = $this->especialidade; $query = "update medico set nome = '$nome', cpf = '$cpf', crm = '$crm', especialidade_id = '$especialidade' where id = $id"; $status = $bd->query($query); return $status; } Acima ^ está a função editar...
       
       
       
      abaixo está o form com as informações do médico.
      <form method="POST" action="../controller/Controller-medico.php?op=e"> <input type="hidden" name="id" size="5" value="<?php echo $id; ?>" > <div class="campo"> <label for="nome">Nome: </label> <input type="nome" name="nome" size="30" value="<?php echo $m->getNome() ?>"> </div> <div class="campo"> <label for="cpf">CPF: </label> <input type="text" name="cpf" size="30" value="<?php echo $m->getCpf() ?>"> </div> <div class="campo"> <label for="rg">CRM: </label> <input type="text" name="crm" size="30" value="<?php echo $m->getCrm() ?>"> </div> <div class="campo"> <label for="especialidade"> Especialidade: </label> </div> <div class="campo"> <input type="submit" value="Atualizar"> </div> </form> Gostaria de saber como faço pra setar um input ou um select no caso para a alteração do dado(especialidade)?
    • By Tommoraes
      Pessoal preciso de ajudar! Queria implementar no meu site um gerador de texto,  tipo ao clicar no botão "gerar" mostraria  texto aleatórios. Como faço isso no HTML? Fiz uma imagem de exemplo. 
       
       


    • By AlanB.
      Boa tarde galera, tudo bem? estou tentando aprender javascript, mas o que eu preciso fazer eu ainda não sei.
       
      Eu tenho o meu menu do site e logo abaixo tenho a section serviços e a section produtos. Eu queria que inicialmente o background do menu fosse azul, mas quando a pessoa desse um scroll e chegasse na section serviços, o background do menu alterasse a cor. Alguem pode me ajudar? 
    • By ciceroolira
      olá, gostaria que alguém possa me ajudar, tenho um iframe com um link por exemplo do site da rede tv, na mesma aba tem o player para assistir ao vivo, gostaria de saber como colocar apenas o player para aparecer e o restante do site ficar oculto.
      ou seja, a unica coisa que vai aparecer no meio do iframe é o player ao vivo, estou começando a aprender agora é não tenho muita experiência.
       
      <!doctype html> <html> <head> <meta charset="utf-8"> <title> </title> </head> <body> <iframe src="https://www.redetv.uol.com.br/aovivo" width="680" scrolling="no" height="400" allowfullscreen></iframe> </body> </html>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.