I just made a slider but I want to put an alert when the user clicks the images, for example if you click on the image one that shows an alert that says this is image one.
I just made a slider but I want to put an alert when the user clicks the images, for example if you click on the image one that shows an alert that says this is image one.
You can add a <span> tag and add a descriptive id that you want to be displayed in the alert. Inside the tag <span> add the attribute 'onclick' where you will place the alert you want to show.
function alerta(variable){
alert(variable.id)
}<span id='imagen 1' onclick='alerta(this)'>
<img src="https://image.spreadshirtmedia.net/image-server/v1/mp/compositions/P120357271MPC139187015/views/1,width=300,height=300,appearanceId=1,backgroundColor=E8E8E8,version=1472099537/number-one-numero-uno-camisetas-camiseta-premium-hombre.jpg" width="128" height="128" >
</span>
<span id='imagen 2' onclick='alerta(this)'>
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/2NumberTwoInCircle.png" width="128" height="128" >
</span>Try this,
Well I send you an example of how you could do to send an alert and say what image you have, in the function of onclick='cambiar(1)' I put a fixed variable that I retrieve it in the script and declare it to send it an alert , in your case you could put it on each button or you can also set it variable depending on your tastes
function cambiar(uno){
var uno = uno;
alert(uno)
}<div>
<button type='button' id='button' onclick='cambiar(1)'>
SIGUIENTE IMAGEN
</button>
</div>This is a variant of the one published by Cesar Romero. It would be the same but in this case, the id would not have spaces. If the images are going to be created using a pattern and they will go with an identification like that, this can go very well.
function avisa_imagen(id){
var aux = id.split("_");
var id_imagen = aux[1];
alert("Ha seleccionado la imagen " + id_imagen);
}<img id="img_1" src="https://images-na.ssl-images-amazon.com/images/I/21oFf6dD1aL._SX355_.jpg" onclick="avisa_imagen(this.id)"/><br/>
<img id="img_2" src="http://www.handballdeprimera.com/wp-content/uploads/2012/08/2.jpg" onclick="avisa_imagen(this.id)"/>Luck and a greeting
Seeing the other answers, they only give you the IDs, but you never asked for such a thing.
This code does what you ask, that if you click the first image (order from left to right) it will show you the alert.
window.addEventListener("DOMContentLoaded",m)
function m(){
var imgs = [" "];
var contenedor = document.getElementById("contenedor");
for(let i=0;i<contenedor.childNodes.length;i++){
if(contenedor.childNodes[i].nodeName != 'IMG') continue;
else imgs.push(contenedor.childNodes[i]);
}
for(let u=1;u<imgs.length;u++){
imgs[u].addEventListener("click",function(){
alert("La imagen clickeada es la número: "+u);
});
}
}.small {
width: 150px;
height: 150px;
border: 2px solid black;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="contenedor">
<img src="https://www.humanrightslogo.net/sites/default/files/HRLogoCMYKsmallRGB.png" class="small"/>
<img class="small" src="https://svbtleusercontent.com/tylerhayes_24609708604080_small.png"/>
<img class="small" src="https://fundraise.globalbrigades.org/media_gallery/thumb/320/0/Water_2014_Icon_Small.png"/>
</div>
</html>