Me gustaría hacer una galería simple, con tres imágenes, y que el usuario al hacer click en un botón aparezca una de las tres imágenes al azar. Podríais decirme que es lo que tengo mal en mi código, y el motivo por el cual no funciona?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Page Title</title>
<script>
$(document).ready(function(){
var galeria="";
function inicio() {
galeria = document.querySelectorAll("img")
ocultar();
galeria[0].style.display = "block";
}
function ocultar(){
$(galeria).each(function(element){
element.style.display="none";
});
}
function imagenRandom(){
var aleatorio=Math.round(Math.random()*4);
if($(galeria[0])==$(galeria[aleatorio])){
$(galeria[aleatorio]).style.display = "block"
}else{
$(galeria[aleatorio]).style.display = "none"
}
if($(galeria[1])==$(galeria[aleatorio])){
$(galeria[aleatorio]).style.display = "block"
}else{
$(galeria[aleatorio]).style.display = "none"
}
if($(galeria[2])==$(galeria[aleatorio])){
$(galeria[aleatorio]).style.display = "block"
}else{
$(galeria[aleatorio]).style.display = "none"
}
}
});
</script>
</head>
<body onload="inicio()">
<center>
<div>
<h1>Galeria de imágenes</h1>
</div>
<img src="img/dembele.jpg" alt="">
<img src="img/iniesta.jpg" alt="">
<img src="img/messi.jpeg" alt="">
<input type="button" onclick="imagenRandom()" id="verImagen" value="Ver aleatorio" >
</center>
</body>