JavaScript - Como tomar el ID de una imagen cuando se hace clic sobre ella

 
Vista:
sin imagen de perfil
Val: 39
Ha aumentado su posición en 6 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como tomar el ID de una imagen cuando se hace clic sobre ella

Publicado por Francisco Daniel (41 intervenciones) el 18/02/2021 20:26:02
Hola a todos: Tengo una grupo de imagenes que se cargan desde una tabla de la base de datos con php. Este es el codigo:
1
2
3
4
5
6
7
8
9
10
<div class="muestra_color" id="muestra_color">
    <?php require_once('php/conexion.php');
    $res = $con->query("select * from colores");
    while($f = mysqli_fetch_array($res)){ ?>
 
        <img src="<?php echo $f['img']; ?>" alt="" id="<?php echo $f['id']; ?>" name="<?php echo $f['id']; ?>">
 
 
    <?php } ?>
</div>

Como puedo hacer para que al hacer clic sobre una de ellas me devuelva el name o el id que tiene esa imagen. Si se fijan bien tanto el id como el name lo cargo con el valor del campo id de la tabla de la base de datos.

Se puede hacer? Como?

Gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 3.501
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como tomar el ID de una imagen cuando se hace clic sobre ella

Publicado por joel (878 intervenciones) el 19/02/2021 08:31:56
Hola Francisco, utilizar el atributo name en el tag img no es del todo correcto, ya que no existe, para ello, puedes utilizar el dataset name, el cual podrás obtener sin problema desde javascript. Haber si te sirve este código:

1
2
3
4
5
6
7
8
9
<img src="1.png" alt="" id="1" data-name="imagen de una casa">
<img src="2.png" alt="" id="2" data-name="imagen de una moto">
 
<script>
document.querySelectorAll("img").forEach(el => el.addEventListener("click", clickImagen));
function clickImagen(e) {
    alert(this.dataset.name);
}
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 39
Ha aumentado su posición en 6 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como tomar el ID de una imagen cuando se hace clic sobre ella

Publicado por Francisco Daniel (41 intervenciones) el 19/02/2021 15:53:00
Gracias Joel. Excelente, me sirvio mucho. Mil Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar