asked on

How do you add CSS to javascript document.write?

Hello
I want to add a css style to the word "Loading" in my document write.
The Javascript function works fine I just need the css and do not know how.
My style sheet is "test_css" and the style is "loading".
Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<script language=javascript>
function output()
{
 //('<img src="ajax-loader(3).gif" width="32" height="32" />');
  document.write ('<img src="ajax-loader(3).gif" width="32" height="32" />Loading')
}
</script>
<title>Untitled Document</title>
<link href="test_css.css" rel="stylesheet" type="text/css" />
</head>
<p>
  <input type=button  onclick="output()" value="Button">
 </p>
</body>
</html>

Open in new window

Chad Haney

here ya go

document.write ('<img src="ajax-loader(3).gif" width="32" height="32" /><span class="loading">Loading</span>')

Open in new window

hielo

once the document you cannot use document.write. Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<script type="javascript">
function output()
{
 document.getElementById("loader").style.display="";
}
</script>
<title>Untitled Document</title>
<link href="test_css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="loader" style="display:none;font-weight:bold;"><img src="ajax-loader(3).gif" width="32" height="32" />Loading</div>
<p>
  <input type=button  onclick="output()" value="Button">
 </p>
</body>
</html>

Open in new window

Luey

ASKER

Thanks for replying dachusa. I already tried that and it did not work.

Hielo when I press the button using your code nothing at all happens.
Can you take another crack at it for me. I sure would appreciate it.
Thanks

ASKER CERTIFIED SOLUTION

govindarajan78

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

hielo

>>Hielo when I press the button using your code nothing at all happens.
Copy and paste what I provided onto a new file. Save it as test.html and try it. Simply changing your function to what I used will NOT work because you do not have an element with id="loader".

IF the problem persists (with what I posted) then try:
document.getElementById("loader").style.display="block";