Question

So I built randomizing script that prints random numbers from 1 through twenty. And those are all css classes that are in my css file. So here is what I want to do.

I want to have javascript print out the random number in this header id="" and

<!-- This is my js file -->
<script type="text/javascript" src="/assets/quotes.js"></script>

<!-- This is what I want -->
<header id="<script>showClass();</script>">

This is my js code:

var Classes=new Array()

Classes[0] = "one";
Classes[1] = "two";
Classes[2] = "three";
Classes[3] = "four";
Classes[4] = "five";
Classes[5] = "six";
Classes[6] = "seven";
Classes[7] = "eight";
Classes[8] = "nine";
Classes[9] = "ten";
Classes[10] = "eleven";
Classes[11] = "twelve";
Classes[12] = "thirteen";
Classes[13] = "fourteen";
Classes[14] = "fifteen";
Classes[15] = "sixteen";
Classes[16] = "seventeen";
Classes[17] = "eighteen";
Classes[18] = "nineteen";
Classes[19] = "twenty";
Classes[20] = "green";


var Q = Classes.length;
var whichClass=Math.round(Math.random()*(Q-1));
function showClass(){document.write(Classes[whichClass]);}
var random =document.getElementById('random').innerHTML="showClass()";

How can I make it so that the javascript renders in the id=""

Answer 1

The JS won’t render in the quotes as that is just a string. Instead do something like:

<script type="text/javascript">
   document.write("<header id=\"");
   showClass();
   document.write("\">");
</script>

Personally, I’d prefer to add the element in an onLoad handler as roXon suggests but I think the above should drop in to what you have.

Edited to match question revisions.