I have two DIVs on the left are thumbnail images and on the right I have one image. I am trying to click an image on the left side and have it replace the image on the right side. Currently when I select a thumbnail image I get the swirly indicator that the function has been called but the image isn't updated. Can this be completed with normal javascript or should JQuery be used.
<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>
Setting the innerHTML of an img element is not going to display the image. You need to create a link to the image to display it.
<input type="file" id="files" multiple="" accept="image/*" onchange="showDirectory()">
<p id="demo1"></p>
<img id="rightside" style="height:720px; width:720px">
function showDirectory(){
var myFiles = document.getElementById("files");
for(let i=0;i<=myFiles.files.length; i++){
let f = myFiles.files[i];
let e = document.createElement('img');
e.src = URL.createObjectURL(f);
e.onclick = () => {
document.getElementById("rightside").src = (window.URL || window.webkitURL).createObjectURL(f);
};
document.getElementById("demo1").append(e);
}
}
(This works on a blank about:blank page with minimal HTML)
Helpful Links: