How to print javascript within HTML id tag

Tags: javascript,html,css,web

Problem :

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=""

Solution :

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=\"");

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.

    CSS Howto..

    How to hack unsupported mix-blend-mode CSS property?

    How to make gridview in scrollable?

    How to force css borders to display on layered page?

    How to make css notifications without jQuery? [closed]

    How to change css for each additional innerHTML element in a javascript for loop

    How do you use CSS Selectors to select multiple elements? [duplicate]

    how to make a lighting effect using css/html/js [closed]

    How can I get placeholder text to shrink to fit within its text input element and show its entire value? [duplicate]

    How do I get the color attribute of the returned div?

    How do I increase the width of a navbar dropdown?

    How to fix background Opacity css

    How to stretch a header across a web page background with CSS

    Show/hide css class by url parameter with php

    How to serve different size SVG graphic in css background image?

    How to set width correctly in CSS - Need to fix bug with Safari on Mac and on iPad

    How does the DiggBar work?

    How to properly apply WinJS.Binding.Template ListView GridLayout CSS?

    How to make sidebar always visible in the Semantic UI

    How to give space between each tab in the navigation using Jquery and CSS

    How do I limit the number of cells on a row in CSS

    Showing ellipsis in CSS table-cell element

    how to create horizontal drop-down menu with javascript for website?

    how to make css hover just only in a bullet area

    How to prepend a div to another div using javascript

    How to change css style of Kendo Combobox

    How to create a pop-up div on mouse over and stay when click

    How can this effect (line breaks) be achieved with CSS and/or Javascript

    How to Remove the Awkward Margin to the Left of my Unordered List?

    How to implement :parent selector in css

    How to eliminate the overlap border using CSS only