I am trying to make an alert pop up when I click on the picture

Question

I am trying to make it so when you click on each image in the html you recieve an alert telling you what each picture is.

<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>

The images I used were just random ones I pulled from the web but did not go back in to rename them yet.

There is no `onMouseClick` event.... it is `onclick` – epascarello Nov 12 '21 at 18:36 — epascarello, Nov 12 '21 at 18:36

score 0 · Answer 1 · answered Nov 12 '21 at 18:05

The event handler is called onclick not 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()" />

score 0 · Answer 2 · answered Nov 12 '21 at 18:35

I changed a little your code and tested it here.

Try it now like this:

<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>

The mouseup event fires when the user releases the mouse button.

I am trying to make an alert pop up when I click on the picture

2 Answers2