JavaScript & HTML question..?

J

Jason

New member
Ok im learning JavaScript and so im experimenting with it alot.. And i can't figure out how to get this to work.. Can someone help me out please? Thanks :)..

-----------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text Node Modification</title>
<script language="JavaScript" type="text/javascript">
<!--
var textNode = document.getElementById('p1').firstChild;

function showElement() {
return (textNode.data);
}
function showLength() {
return alert(textNode.length);
}
function change() {
return textNode.data = "Now a new Value!";
}
function append() {
return textNode.appendData('added to the end');
}
function insert() {
return textNode.insertData(0,'Added to the front ');
}
function doDelete() {
return textNode.deleteData(0, 2);
}
function replace() {
return textNode.replaceData(0, 4, 'Zap!');
}
function substring() {
return alert(textNode.substringData(2,2));
}
//-->
</script>
</head>

<body>
<p id="p1">This is a test</p>
<form>
<input type="button" value="Show" onclick="showElement()">
<input type="button" value="Length" onclick="showLength()">
<input type="button" value="Change" onclick="change()">
<input type="button" value="Append" onclick="append()">
<input type="button" value="Insert" onclick="insert()">
<input type="button" value="Delete" onclick="doDelete()">
<input type="button" value="Replace" onclick="replace()">
<input type="button" value="Substring" onclick="substring()">
</form>
-----------------------------
 
Hey Man Just Put "Defer" in script tag to make it
<script language="JavaScript" type="text/javascript" Defer>
This will solve the problem
 
The problem is that your code is executing before the rest of the page loads, so
var textNode =document.getElementById('p1').firstChild;
ends up being called BEFORE the browser parses and renders the part of the document that contains the element you are retrieving.

To handle this, put your code in the window.onload event handler.
A variety of ways to do this can be found here:
http://javascript.about.com/library/blonload.htm
 
Back
Top