JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<body>
<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" alt="quotes"> <!--This is what I am trying to make random when the page loads-->
</div>
</body>
</html>

JavaScript

$(document).ready(function() {
    //Array of quotes
    var randomImages= ["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
    $('#quoter').attr('src',randomImages[randomNumber]);
});