display images array onclick button

Question

HTML: I set the button onclick "myFunction" Now I would like images to be displayed onclick

<body>



<p>Click the button to see some images</p>


<button onclick="myFunction()">See the Images!!!</button>



<script src="js2/images.js">





</script>

</body>

JS: Need to display images onclick...Not sure if i am on the right track as I am a beginner at JS...I cant seem to get the images to display, only the src name of the images....

function myFunction() {

pge = new Array ()

 pge[4] = "../images/sky3.jpg"


 pge[3] = "../images/sky8.jpg"

 pge[2] = "../images/sky7.jpg"

 pge[5] = "../images/sky6.jpg"

 pge[0] = "../images/sky5.jpg"

 pge[1]= "../images/sky4.jpg"

 pge[6] = "../images/sky1.jpg"  

 pge[7] = "../images/sky2.jpg"




 for (i=0;i<=pge.length-1;i++) {


var img = document.createElement("img");

????????

}


}

score 0 · Answer 1 · answered Dec 11 '16 at 15:49

0

Add line

img.setAttribute("src", pge[i]);

in your ?????? part

answered Dec 11 '16 at 15:49

Kiran Shinde

5,732
4
24
41

score 0 · Answer 2 · edited May 23 '17 at 12:00

0

Something like this should do the trick. (in part based on How to display image with javascript?)

<!DOCTYPE html>
<html>
<head>
 <title>Test</title>
</head>
<body> 
 <p>Click the button to see some images</p>

 <button onclick="myFunction()">See the Images!!!</button>

 <script>
  function show_image(src, width, height, alt) {
   var img = document.createElement("img");
   img.src = src;
   img.width = width;
   img.height = height;
   img.alt = alt;

   // This next line will just add it to the <body> tag
   document.body.appendChild(img);
  }
   
  function myFunction() {
   var pge = ["http://www.w3schools.com/graphics/pic_the_scream.jpg", "http://www.w3schools.com/images/colorpicker.gif"];

   for(var i = 0; i < pge.length; i++){
    show_image(pge[i], 100, 200, i)
   }
  }          
 </script>
</body>
</html

edited May 23 '17 at 12:00

Community

1
1

answered Dec 11 '16 at 15:57

Scalarr

746
7
26

Nice! so that works when I use the images from w3schools, however when I try and use the images I have in a folder on my computer it does not display the images just the "alt"???? do I need to change the src??? – Dec 11 '16 at 18:09
Use the folder/location relative to your path where your index.html is e.g. images/sky1.jpg instead of those two examples I put there in the array. Like var pge = ["images/sky1.jpg", "images/sky2.jpg", "images/sky3.jpg", ...] – Scalarr Dec 12 '16 at 09:07

score 0 · Answer 3 · answered Dec 11 '16 at 19:12

Your HTML needs a place to display the images when the button is clicked. You can use CSS to style the div.

<body>
        <p>Click the button to see some images</p>

        <button onclick="myFunction()">See the Images!!!</button>

        <div id="showImg"></div>        

        <script src="js2/images.js"></script>    
</body>

You don’t have to use the Array constructor. Store your images in an array as shown below, use a for-loop to loop through the array, then use the innerHTML property to create img tags, locate your images and display them. You can use CSS to style the images.

    var pge = ["sky3.jpg", "sky8.jpg", "sky7.jpg", "sky6.jpg", "sky5.jpg", "sky4.jpg", "sky1.jpg", "sky2.jpg"];
var showImg = document.getElementById("showImg");

var myFunction = function(){
    for(var i = 0; i < pge.length; i++)
    {
        showImg.innerHTML = "<img src='images/" + pge[0] + "'/> <img src='images/" + pge[1] + "'/> <img src='images/" + pge[2] + "'/> <img src='images/" + pge[3] + "'/> <img src='images/" + pge[4] + "'/> <img src='images/" + pge[5] + "'/> <img src='images/" + pge[6] + "'/> <img src='images/" + pge[7] + "'/>";
    }
}

display images array onclick button

3 Answers3