Estoy tratando de hacer que cuando haga clic en cada imagen en el html, reciba una alerta que le diga qué es cada imagen.
<html lang="en"> <head> <title>Task 2</title> </head> <body> <img id="blackcircle" src="31NXhN9iZoL._AC_SY355_.jpg" height="200" width="250" onMouseClick="eventOne()"/> <img id="redtriangle"src="1200px-Red_triangle_with_thick_white_border.svg.png" height="200" width="250" onMouseClick="eventTwo()"/> <img id="bluesquare"src="download.png" id="jamaica" height="200" width="250" onMouseClick="eventThree()"/> <script> var myImages = [ "31NXhN9iZoL._AC_SY355_.jpg", "1200px-Red_triangle_with_thick_white_border.svg.png", "download.png", ]; function eventOne() { alert("You have clicked on the black circle"); } function eventTwo() { alert("You have clicked on the red triangle"); } function eventThree() { alert("You have clicked on the blue square"); } </script> </body>Las imágenes que usé fueron solo aleatorias que saqué de la web, pero aún no volví a cambiarles el nombre.
El controlador de eventos se llama onclick no onMouseClick .
function eventOne() { alert('You have clicked on the black square'); } function eventTwo() { alert('You have clicked on the red square'); } function eventThree() { alert('You have clicked on the blue square'); } <img src="https://dummyimage.com/100x100/000/fff" onclick="eventOne()" /> <img src="https://dummyimage.com/100x100/ff0000/000" onclick="eventTwo()" /> <img src="https://dummyimage.com/100x100/0000ff/000" onclick="eventThree()" />Cambié un poco tu código y lo probé aquí.
Pruébalo ahora así:
<html lang="en"> <head> <script> var myImages = [ "31NXhN9iZoL._AC_SY355_.jpg", "1200px-Red_triangle_with_thick_white_border.svg.png", "download.png", ]; function eventOne() { alert("You have clicked on the black circle"); } function eventTwo() { alert("You have clicked on the red triangle"); } function eventThree() { alert("You have clicked on the blue square"); } </script> <title>Task 2</title> </head> <body> <img id="blackcircle" src="31NXhN9iZoL._AC_SY355_.jpg" height="200" width="250" onclick ="eventOne()"/> <img id="redtriangle"src="1200px-Red_triangle_with_thick_white_border.svg.png" height="200" width="250" onmouseup="eventTwo()"/> <img id="bluesquare" src="download.png" height="200" width="250" onclick="eventThree()"/> </body>El evento mouseup se activa cuando el usuario suelta el botón del mouse.