How to properly display an image taken from an array

Question

I am trying to make a random image from an array appear onscreen with the page load. I know the page successfully gets a random img src, but the physical image never appears. Do I need to reference it in my html? How would I go about getting that random image src to make a visible image.

<!DOCTYPE html>
<html>
    <head>
        <title>Hiragana Flash Cards</title>
    </head>
    <body>
        <h2>Hiragana Flash Cards</h2>
        <script>
            var imgArray = new Array();
            imgArray[0] = new Image();
            imgArray[0].src = 'a.png';
            imgArray[1] = new Image();
            imgArray[1].src = 'i.png';
            imgArray[2] = new Image();
            imgArray[2].src = 'u.png';
            imgArray[3] = new Image();
            imgArray[3].src = 'e.png';
            imgArray[4] = new Image();
            imgArray[4].src = 'o.png';
            imgArray[5] = new Image();
            imgArray[5].src = 'ka.png';

            function imgRandom(imgArr) {
                return imgArr[Math.floor(Math.random() * imgArr.length)];
                }
            console.log(imgRandom(imgArray)); 
        </script>
    </body>
</html>

score 0 · Answer 1 · answered Jul 08 '18 at 18:10

You need to append the image to the document:

 var imgArray = new Array();
            imgArray[0] = new Image();
            imgArray[0].src = 'a.png';
            imgArray[1] = new Image();
            imgArray[1].src = 'i.png';
            imgArray[2] = new Image();
            imgArray[2].src = 'u.png';
            imgArray[3] = new Image();
            imgArray[3].src = 'e.png';
            imgArray[4] = new Image();
            imgArray[4].src = 'o.png';
            imgArray[5] = new Image();
            imgArray[5].src = 'ka.png';

            function imgRandom(imgArr) {
                return imgArr[Math.floor(Math.random() * imgArr.length)];
                }
            var randomImage = imgRandom(imgArray); //Create the image
            document.getElementById('container').appendChild(randomImage); // Append the image

<!DOCTYPE html>
<html>
    <head>
        <title>Hiragana Flash Cards</title>
    </head>
    <body>
        <h2>Hiragana Flash Cards</h2>
        <!--You can place the image here -->
        <div id="container"></div>
    </body>
</html>

Check appendChild() documentation

score 0 · Answer 2 · answered Jul 08 '18 at 18:10

0

Append it to body like this

document.body.append(imgRandom(imgArray));

answered Jul 08 '18 at 18:10

Fredrik Widerberg

3,068
10
30
42

score 0 · Answer 3 · answered Jul 08 '18 at 18:20

You can modify the src variable of the img tag and set it to the image URL.

Snippet

var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'blue.png';
imgArray[1] = new Image();
imgArray[1].src = 'green.png';

function imgRandom(imgArr) {
  return imgArr[Math.floor(Math.random() * imgArr.length)];
}

document.getElementById("random").src = imgRandom(imgArray).src;
console.log(imgRandom(imgArray));

<!DOCTYPE html>
<html>
    <head>
        <title>Hiragana Flash Cards</title>
    </head>
    <body>
        <h2>Hiragana Flash Cards</h2>
        <img id="random">
    </body>
</html>

Short version

document.getElementById("random").src = imgRandom(imgArray).src;

How to properly display an image taken from an array

3 Answers3

Snippet

Short version