Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Random Quote Generator Script Help (For Uni Project)

    I have to create a website as a project for my university course. Said course has nothing at all to do with computers really so it's really throwing us into the deep end as the majority of us have/had no interest in this particular field.

    Regardless, I am creating a website that uses the Random Quote Generator Javascript that I copied from the Hotscripts website. The code details are below and my question is: is there any way I could change the formatting for each quote? For example, change quote 1 to be, say, yellow or bold and change quote 3 to be aligned right and blue? I mainly want to change the colour for each quote but having any other info on how to format it would be really helpful.

    Code:
    var quotes=new Array();
    quotes[0] = "This is quote 1.";
    quotes[1] = "This is quote 2.";
    quotes[2] = "This is quote 3.";
    
    var q = quotes.length;
    var whichquote=Math.round(Math.random()*(q-1));
    function showquote(){document.write(quotes[whichquote]);}
    showquote();
    Also if you could put it into total idiot-speak for me I'd be oh so grateful.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,145
    Thanks
    38
    Thanked 505 Times in 499 Posts

    Lightbulb Something to try...

    Try this ...
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    
    <style type="text/css">
    /* use whatever CSS control combinations you desire for display */
    em { color:hotpink; }
    .quot0 { text-align:left; background-Color:cyan; color:black; }
    .quot1 { text-align:right; background-Color:yellow; color:blue; }
    .quot2 { text-align:center; background-Color:orange; color:black; }
    .quot3 { text-align:left; background-Color:black; color:white; }
    .quot4 { text-align:right; background-Color:red; color:white; }
    .quot5 { text-align:center; background-Color:lime; color:black; }
    .quot6 { text-align:left; background-Color:white; color:black; }
    </style>
    
    <script type="text/javascript">
    var quotes = [
        "This is <em>quote 1.</em>",
        "This is <em>quote 2.</em>",
        "This is <em>quote 3.</em>",
        "This is <em>quote 4.</em>",
        "This is <em>quote 5.</em>",
        "This is <em>quote 6.</em>",
        "This is <em>quote 7.</em>"  // No comma after last entry
    ];
    var qarray = ['quot0','quot1','quot2','quot3','quot4','quot5','quot6'];
    
    function rndQuote() {
      var whichQuote=Math.floor(Math.random()*(quotes.length));
      document.getElementById('Quote').innerHTML = quotes[whichQuote]; 
      document.getElementById('Quote').className = qarray[whichQuote];
    /*  for testing purposes only
      alert(document.getElementById('Quote').className+'\nColor: '+
            document.getElementById('Quote').style.color+'\nBGcolor: '+
            document.getElementById('Quote').style.backgroundColor
      );
    */
    }
    
    window.onload = function() { rndQuote(); }
    </script>
    
    </head>
    <body>
    <div id="Quote" class="quot0"></div>
    
    <!-- next line is optional for testing -->
    <p><button onclick="rndQuote()">Test Quote</button>
    </body>
    </html>
    Add to or subtract from the CSS class styles to fit your quote needs.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That appears to work perfectly. Thank you so much for your help, I was getting majorly stressed out over it. You've made my day, man.

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,145
    Thanks
    38
    Thanked 505 Times in 499 Posts

    Thumbs up

    Quote Originally Posted by VeryBasic View Post
    That appears to work perfectly. Thank you so much for your help, I was getting majorly stressed out over it. You've made my day, man.
    You are most welcome.
    Happy to help.

    Note: there are a number of display conditions you can control with the CSS statements.

    Good Luck!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •