Home/ Questions/Q 8713353
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T05:19:24+00:00

I am relatively new with javascript and as such, my code to get a

  • 0

I am relatively new with javascript and as such, my code to get a random image to show up when my page loads is not working. I have looked at a few examples to try and solve the problem, but after a few hours of searching I am ready to press the help button. I have included the HTML and script for my page. Additionally, I have commented the IMG tag I am trying to manipulate.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome in.</title>
<link href="home.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="slides.js"></script>
<script>
//This is where I am attempting to set an random image to load.
function()
{   
    //Array of quotes
    var randomImages= new Array ("Images/quote1.png", "Images/quote2.png","Images/quote3.png", "Images/quote4.png", "Images/quote5.png","Images/quote6.png","Images/quote7.png","Images/quote8.png");

    //Random number to select an image. Use 8, not 7, since javascript arrays are 0 based
    //Math.floor will take us from a floating point number to an integer base
    var randomNumber = Math.floor(7*Math.random());


    //Display that image
    document.getElementById('quoter').setAttribute('src',randomImages[randomNumber]);
}
</script>
</head>
<body onLoad="function()">
<a href="aboutme.html" id="aboutMe"><img src="Images/aboutme.png" alt="aboutme"/></a>
<a href="aboutme.html" id="contact"><img src="Images/contact.png" alt="aboutme"/></a>
<a href="aboutme.html" id="blog"><img src="Images/blog.png" alt="aboutme"/></a>
<a href="aboutme.html" id="wife"><img src="Images/mywife.png" alt="aboutme"/></a>
<div id="mid">
</div>
<div id="slideshow">
   <div>
     <img src="Images/dummypic.png" alt="me">
   </div>
   <div>
     <img src="Images/dummypic2.png" alt="me">
   </div>
   <div>
     <img src="Images/dummypic3.png" alt="me">
   </div>
</div>
<div>
<img id="quoter" src="" alt="quotes"> <!--This is what I am trying to make random when the page loads-->
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Provide a name to your function.

    It can not be function(), It should be like function function_name() and then use it on body onLoad like <body onLoad="function_name()">

    As you have included jquery-1.7.1.min.js, you can try this code, and you should remove body onload attribute.

    $(function(){
    //Array of quotes
    var randomImages= new Array ("Images/quote1.png", "Images/quote2.png","Images/quote3.png", "Images/quote4.png", "Images/quote5.png","Images/quote6.png","Images/quote7.png","Images/quote8.png");

    //Random number to select an image. Use 8, not 7, since javascript arrays are 0 based
    //Math.floor will take us from a floating point number to an integer base
    var randomNumber = Math.floor((randomImages.length-1)*Math.random());

    //Display that image
    $('#quoter').prop('src',randomImages[randomNumber]);
});
    • 0