Bueno bro, primero como consejo no te recomiendo que escribas el script en el mismo documento HTML, no digo que no se pueda, pero es mala práctica, siempre es mejor llamarlo por fuera.
Con respecto a tu problema:
te recomiendo que mejor utilices el método setAttribute para cambiarle la ruta al src de la images al hacerle click.
por ejemplo cuando le haces click el src de la images cambiará por la ruta de la imagen que quieras que aparesca en su lugar
Yo tengo un problema parecido con algo, lo que tengo son 5 imagenes cada una llamada 1,2,3,4,5 respectivamente. La idea es que al hacer click a un botón se genere un número aleatorio del 1 al 5 y reemplase al src de la imagen por el número generado, de esa forma cambia la imagen de forma aleatoria: mira:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hdfghgfd</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<img id="image" src="images/1.jpg" height="200px" width="400px"/>
<buttom id="buttom" href="#" style="border:1px solid black">Cambiar Imagen</buttom>
<script src="js/script.js "></script>
</body>
</html>
================================================== =
javaScript
function cambiarImg() {
var hola=Math.floor((Math.random()*5)+1);
console.log(hola);
var img=document.getElementById('image');
img.setAttribute('src','images/'+hola+'.jpg');
}
var butt=document.getElementById('buttom');
butt.onclick=function(){
cambiarImg();
};
=============================================
con eso cada vez que se le da click al botón, la imagen cambia aleatoriamente.
Si necesitas una explicación más a fondo del código, sólo dilo.