Estoy empezando en esto, y mi intención es hacer una galería de imágenes desde donde el usuario pueda escoger la foto que desee utilizando dos botones. Falta depurarlo, pero cuando pruebo lo que tengo hecho hasta ahora me aparece en consola un mensaje de addEventListener is not a function
.
$(document).ready(function() {
var galeria = document.querySelectorAll("img");
$("img").hide();
var z = 0;
$("#botonSiguiente").addEventListener("click", siguienteImg, false);
$("#botonAnterior").addEventListener("click", anteriorImg, false);
function siguienteImg() {
galeria[z].show();
z++;
}
function anteriorImg() {
galeria[z].show();
z--;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<center>
<div>
<h1>Galeria de imágenes</h1>
</div>
<div id="galeriaImg">
<img src="img/casa.jpg" alt="">
<img src="img/perro.jpg" alt="">
<img src="img/gato.jpeg" alt="">
</div>
<input type="button" id="botonAnterior" value="Anterior imágen">
<input type="button" id="botonSiguiente" value="Siguiente imágen">
</center>
</body>