CODEWITHSUNDEEP
javascriptarraysimagerandom
Pranit Shinde
Pranit Shinde

Reputation: 43

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

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>');

Upvotes: 2

Views: 1751

Answers (2)

Thum Choon Tat
Thum Choon Tat

Reputation: 3090

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();
}

Upvotes: 1

songxunzhao
songxunzhao

Reputation: 3169

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 = "" >';

Upvotes: 1

Related Questions