Trying to use Javascript array to display Random images in <div>

Question

I'm not well know about javascripts, got this code from a website. Using javascript to display random images from array in div javascript working fine. But loaded images displays in random sizes tried using css style and all css html image attributes to resize them but nothing works, as they are displayed directly through javascript

want something to resize them directly in javascript

code main :

<script>    
           var arrayImg = new Array();
           arrayImg[0] = "a11.jpg";
           arrayImg[1] = "a12.jpg";


            getRandomImage(arrayImg, "");

          function getRandomImage(imgAr, path) {      
            path = path || 'images/'; // default path here
            var num = Math.floor( Math.random() * imgAr.length );
            var img = imgAr[ num ];
            var imgStr = '<img src="' + path + img + alt = "" >';
            document.writein(imgStr); 
            document.close();
            }

         </script>

code I used to resize image : (but didn't work) :

<script>    
           var arrayImg = new Array();
           arrayImg[0] = "a11.jpg";
           arrayImg[1] = "a12.jpg";


            getRandomImage(arrayImg, "");

          function getRandomImage(imgAr, path) {      
            path = path || 'images/'; // default path here
            var num = Math.floor( Math.random() * imgAr.length );
            var img = imgAr[ num ];
            var img.height = 4vw;
            var img.width = 20%;
            var imgStr = '<img src="' + path + img + img.height + img.width + alt = "" >';
            document.writein(imgStr); 
            document.close();
            }

         </script>

even tried using : (but still didn't work)

document.writeln('<td' + '><imgstr"' + height="180" width="160" border="0" ><' + '/td>');

Thum Choon Tat · Accepted Answer · 2017-10-23 10:24:21Z

1

You have a few syntax error in getRandomImage function.

function getRandomImage(imgAr, path) {      
    path = path || 'images/'; // default path here
    var num = Math.floor( Math.random() * imgAr.length );
    var img = imgAr[ num ];

    /* 
        1. variable name should not contain . 
        2. the width and height value should be quoted and placed in "style" attribute
    */
    //var img.height = 4vw;
    //var img.width = 20%;
    var imgHeight = '4vw';
    var imgWidth = '20%';

    /* closed string quotations and placed data in the right attribute */
    var imgStr = '<img src="' + path + img + '"'
               + ' style="height:' + imgHeight + ';width:' + imgWidth + ';'
               + ' alt="">';
    document.writein(imgStr); 
    document.close();
}

answered Oct 23, 2017 at 10:24

Thum Choon Tat

3,0901 gold badge24 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pranit Shinde Over a year ago

used document.write(imgStr); instead of document.writein(imgStr); in your given code and worked, thank you so much +rep for you :D

songxunzhao · Accepted Answer · 2017-10-23 10:14:16Z

1

You have several places where you didn't close quotation marks.

In code main:

var imgStr = '<img src="' + path + img + '"' + ' alt = "" >';

In resize code

var imgStr = '<img src="' + path + img + '" height="' + img.height + '" width="' + img.width + '" alt = "" >';

answered Oct 23, 2017 at 10:14

songxunzhao

3,1691 gold badge14 silver badges15 bronze badges

Collectives™ on Stack Overflow

Trying to use Javascript array to display Random images in <div>

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related