{"id":3860,"date":"2016-01-10T11:39:37","date_gmt":"2016-01-10T11:39:37","guid":{"rendered":"http:\/\/www.hostingnotes.com\/?p=3860"},"modified":"2017-09-27T15:39:10","modified_gmt":"2017-09-27T15:39:10","slug":"random-image-display-using-javascript","status":"publish","type":"post","link":"https:\/\/www.webdevelopersnotes.com\/random-image-display-using-javascript","title":{"rendered":"Random image display using JavaScript"},"content":{"rendered":"<p>Displaying a random image on a web page using JavaScript involves the following steps:<\/p>\n<ul class=\"withbullets\">\n<li>Listing the images you plan to display<\/li>\n<li>Storing the names of these images in an array<\/li>\n<li>Using the <span class=\"codeword\">Math.random()<\/span> method to obtain a random value\n<\/li>\n<li>Rounding the random number to an integer using <span class=\"codeword\">Math.floor()<\/span><\/li>\n<li>Displaying the image using <span class=\"codeword\">document.write()<\/span> method<\/li>\n<\/ul>\n<h2>Listing the images and storing them in an array<\/h2>\n<p>Let&#8217;s suppose we plan to display one image from a set of 5 images, r1.gif, r2.gif, r3.gif, r4.gif and r5.gif. We create an array called <strong>img_rnd<\/strong> and store the image names in it.<\/p>\n<pre>\r\nvar img_rnd = new Array (\"r1.gif\", \"r2.gif\",\r\n\"r3.gif\", \"r4.gif\", \"r5.gif\");\r\n<\/pre>\n<p>Remember, JavaScript arrays are zero indexed (the first element of an array in JavaScript has an index of 0). The <span class=\"codeword\"><strong>Math.random()<\/strong><\/span> method returns a value between 0.0 and 1.0. We have to convert this value to an integer between 0 to 4 so that it can be used as an index to retrieve the image name from the <strong>img_rnd<\/strong> array. We store the final value in a variable <strong>i<\/strong>.<\/p>\n<h2>Generating a random number<\/h2>\n<pre>\r\nvar i = Math.floor(4*Math.random());\r\n<\/pre>\n<p>The above code can be broken into two parts for easy understanding:<\/p>\n<ol class=\"slide-steps\">\n<li>The random number thrown out by <span class=\"codeword\">Math.random()<\/span> method is multiplied by 5, which is the number of elements in our array.<\/li>\n<li>The <span class=\"codeword\">Math.floor()<\/span> method is then used to convert the random floating point (decimal) number into an integer. Since floor() <em>rounds a number down<\/em>, we shall always get a number between 0 and 4.<\/li>\n<\/ol>\n<h2>Displaying the image<\/h2>\n<p>The final step is to display the image through <em>document.write()<\/em> method.<\/p>\n<pre>\r\ndocument.write('&lt;img src=\"' + img_rnd[i] + '\" width=\"100\"\r\nheight=\"100\" alt=\"Random image\" \/&gt;');\r\n<\/pre>\n<p>We now place all this code between <span class=\"codeword\">&lt;script&gt;-&lt;\/script&gt;<\/span> tags.<\/p>\n<pre>\r\n&lt;script language=\"JavaScript\"&gt;\r\n&lt;!--\r\nvar img_rnd = new Array (\"r1.gif\", \"r2.gif\", \r\n\"r3.gif\", \"r4.gif\", \"r5.gif\");\r\n\r\nvar i = Math.floor(4*Math.random());\r\n\r\ndocument.write('&lt;img src=\"' + img_rnd[i] + '\" width=\"100\"\r\nheight=\"100\" alt=\"Random image\" \/&gt;');\r\n\r\n\/\/--&gt;\r\n&lt;\/script&gt;\r\n\r\n\r\n<\/pre>\n<p><a href=\"\/\/www.webdevelopersnotes.com\/tips\/html\/random-image-display-using-javascript.html\" target=\"_blank\">Click here to see how this works!<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Displaying a random image on a web page using JavaScript involves the following steps: Listing the images you plan to display Storing the names of these images in an array Using the Math.random() method to obtain a random value Rounding the random number to an integer using Math.floor() Displaying the image using document.write() method Listing [&hellip;]","protected":false},"author":1,"featured_media":14670,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[56],"tags":[],"class_list":["post-3860","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts\/3860","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/comments?post=3860"}],"version-history":[{"count":0,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts\/3860\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/media\/14670"}],"wp:attachment":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/media?parent=3860"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/categories?post=3860"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/tags?post=3860"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}