Tengo dos DIV a la izquierda son imágenes en miniatura y a la derecha tengo una imagen. Estoy tratando de hacer clic en una imagen en el lado izquierdo y hacer que reemplace la imagen en el lado derecho. Actualmente, cuando selecciono una imagen en miniatura, aparece el indicador giratorio de que se ha llamado a la función, pero la imagen no está actualizada. ¿Se puede completar esto con javascript normal o se debe usar JQuery?

 <script type="text/javascript"> // This function will display photos selected by user function showDirectory(){ var myFiles = document.getElementById("files"); for(var i=0;i<=myFiles.files.length; i++){ var x = myFiles.files[i].name; document.getElementById("demo1").innerHTML += "<img onclick='switchImage("+x+")' src='"+x+"' style='width:40px; height:40px; margin:5px'>" } } function switchImage(e){ document.getElementById("rightside").src=e; } </script>

 <div class="item" style="width: 70%; background-color: bisque; padding: 5px;"> <img id="rightside" src="RightSide.jpg" alt="Picture of " style="height: 720px; width:720px"> <p style="color: #000; text-align: right;">Slide1.jpg</p> </div> </div>