www.webdeveloper.com
Results 1 to 3 of 3

Thread: CSS Tags in a Random Text Generator

  1. #1
    Join Date
    Aug 2014
    Posts
    2

    CSS Tags in a Random Text Generator

    I'm attempting to build a code that, every ten seconds, randomly displays text from a given text array. Based on other posts I've found lying in the webdeveloper.com archives I've built the following:

    Code:
    <html>
    <head>
    <title>Random Text</title>
    <script type="text/javascript">
    var textarray = [
     "<i>&quot;Bunch of Words&quot;</i> - Quote Author",
    "<i>&quot;Quote Number Two&quot;</i> - Second Quote Author"
    
     
    ];
    
    function RndText() {
      var rannum= Math.floor(Math.random()*textarray.length);
      document.getElementById('ShowText').innerHTML=textarray[rannum];
    }
    onload = function() { RndText(); 
    var inter = setInterval(function() { RndText(); }, 10000);}
    
    </script>
    </head>
    <body>
    <div id="ShowText"></div>
    </body>
    
    </html>
    There are, of course, more quotes in the text array, I just put two for simplicity's sake. The above does indeed run. That's not the problem. The problem is when I modify the code to the following:

    Code:
    <html>
    <head>
    <title>Random Text</title>
    <script type="text/javascript">
    var textarray = [
     "<i><p style=font-family:verdana><p style=font-size:72px>&quot;Bunch of Words&quot;</i> - Quote Author</p></p>",
    "<i><p style=font-family:verdana><p style=font-size:72px>&quot;Quote Number Two&quot;</i> - Second Quote Author</p></p>"
    
     
    ];
    
    function RndText() {
      var rannum= Math.floor(Math.random()*textarray.length);
      document.getElementById('ShowText').innerHTML=textarray[rannum];
    }
    onload = function() { RndText(); 
    var inter = setInterval(function() { RndText(); }, 10000);}
    
    </script>
    </head>
    <body>
    <div id="ShowText"></div>
    </body>
    
    </html>
    Now, I'm guessing the problem here is the fact that I'm trying to use CSS in a javascript section, but I can't figure out how to fix it. Does anyone else have any suggestions? (Yes, I am using HTML5. The web designer I'm using doesn't like any other HTML version for some reason. )

  2. #2
    Join Date
    May 2014
    Posts
    1,043
    1) you can't put a paragraph inside a paragraph, that's invalid markup.

    2) depending on your doctype, you can't put italics around a paragraph as that's a inline-level element. HTML 5-tards say it's ok, but it's still buggy as sin and completely pointless in this case.

    3) no quotes on complex attribute values is going to be broken.

    4) it's accessibility trash to declare fonts in pixels... and 72px? REALLY?!?

    5) If those are quotes, it should be a BLOCKQUOTE, not a DIV... probably with a CITE inside it too.

    6) You may want to learn what semantic markup is.

    7) GET your CSS out of the markup... and out of the scripting too.

    8) You don't need that extra wrapping function on the timeout

    9) Might be nice to double check the new quote isn't the existing one.

    10) I'd move that script to right before </body> so you don't have to wait for onload.

    11) That's a sloppy onload method that shouldn't work in the first place.

    Try this on for size:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <style type="text/css">
    	#showText {
    		font:italic 72px/80px arial,helvetica,sans-serif;
    	}
    </style>
    
    <title>
    	Random Text
    </title>
    
    </head><body>
    
    <blockquote id="showText"></blockquote>
    
    <script type="text/javascript"><!--
    
    (function() {
    
    	var
    		quotes = [
    			'<p>"Bunch of Words" - <cite>Quote Author</cite></p>',
    			'<p>"Quote Number Two" - <cite>Second Quote Author</cite></p>'
    		],
    		showText = document.getElementById('showText'),
    		current = quotes.length,
    		next;
    
    	function randomQuote() {
    		do {
    			next = Math.floor(Math.random() * quotes.length);
    		} while (next == current);
    		showText.innerHTML = quotes[current = next];
    	}
    	
    	randomQuote();
    	setInterval(randomQuote, 10000);
    	
    })();
    
    --></script>
    
    </body></html>
    I also tossed it into an anonymous function so as to avoid the possibility of namespace conflicts.

    Though a 'better' version would have the CSS and scripting in external files where they can be cached across pages if need be -- or even the same page if the visitor comes back later.
    Java is to JavaScript as Ham is to Hamburger.

  3. #3
    Join Date
    Aug 2014
    Posts
    2
    Thank you so much Shadow. You're a lifesaver! :P

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles