Menu
Hi,
my webpage (draft can be found [URL=http://markstar.sam-city.com/]here
I already use an external CSS file to avoid typing the same stuff over and over again and now I would like to do the same with first three cells that are basically the same on every page. My idea was to call a function (tblcreator) that is called when the body is loaded:
[code=html]<body onload=”tblcreator()”>
Now afaik there are two ways how to add elements with JS:
[B]1)
[CODE]function tblcreator (){
document.write(“<table><tr><td class=”new1″>This is</td><td>a test.</td></tr></table>”);
}
[B]2)
[CODE]function tblcreator (){
var myH1 = document.createElement(“h1”);
var myText = document.createTextNode(“This is”);
myH1.appendChild(myText);
var myoutput = document.getElementsByTagName(“body”)[0];
myoutput.appendChild(myH1);
}
Both work but I have severe problems with both approaches:
-> [B]1)
[code=html]<html><head><title>Test</title>
<link rel=”stylesheet” type=”text/css” href=”test.css”>
<script type=”text/javascript”>
function tblcreator ()
{
document.write(“<b>Hi there.</b>”);
document.write(“<table><tr><td class=”new1″>This is</td><td>a test.</td></tr></table>”);
}
</script>
</head>
<body onload=”tblcreator()” style=”background-color:#33FFFF “>
<div style=”background-color:#33FFFF “> This is a test.</div>
</body></html>
The test.css only consists of this line:
[CODE].new1 { background-color:#00FF00 }
But when you load the page it is still white and the text that is actually in the body is never displayed. Once I disable the function (eg an intentional spelling mistake), the rest works fine. ?
b) While I even get CSS to run with JS, is it possible to make JavaScript-Code work that was [B]created
[code=html]<html><head><title>Test</title>
<link rel=”stylesheet” type=”text/css” href=”test.css”>
<script type=”text/javascript”>
Normal1 = new Image();
Normal1.src = “newsnor.gif”;
Highlight1 = new Image();
Highlight1.src = “newstmp.gif”;
function changepic(picnr,picobject)
{
window.document.images[picnr].src = picobject.src;
}
function tblcreator ()
{
document.write(“<b>Hi there.</b>”);
document.write(“<table><tr><td class=”new1″>This is</td><td>a test.</td></tr></table>”);
document.write(“<a href=”news.html” onMouseOver=”changepic(0, Highlight1)” onMouseOut=”changepic(0, Normal1)”>”);
document.write(“<img src=”newsnor.gif” alt=”news/main page” style=”position:absolute; top:150px; border:none”><br>”);
}</script>
</head>
<body onload=”tblcreator()” style=”background-color:#33FF22 “>
<div style=”background-color:#F3552F “> This is another test.</div>
</body></html>
This is the same mousover-mechanism that I use on my page, but when created via JS ist doesn’t work. ? Any idea why or how I could fix this?
2) About the other solution: While I am able to create a singe cell as part of the table, having more than one cell seems to be a problem, disregarding the fact that I have no clue how I would add CSS to that. Here an example:
[code=html]function tblcreator ()
{
var myH1 = document.createElement(“table”);
var myr1 = document.createElement(“tr”);
var myt1 = document.createElement(“td”);
var myt2 = document.createElement(“td”);
var myText = document.createTextNode(“This is a Testpage.”);
myH1.appendChild(myr1);
myr1.appendChild(myt1);
myr1.appendChild(myt2);
myt1.appendChild(myText);
myt2.appendChild(myText);
var outputarea = document.getElementsByTagName(“body”)[0];
outputarea.appendChild(myH1);
}
But it doesn’t work either. Only the first cell is displayed, the rest disregarded. 😡
Anyways, I think I almost got the first solution to work but I would I would really appreciate some advice on how to:
– Get JS to work within the JS (= OnMouseOver, etc…)
– How to make the rest of the page appear and have a working central CSS file.
Thanks in advance!
Markstar