I don’t understand how to manipulate the DOM very well. I have used
document.getElementById('someid').innerHTML = "HI";
in other places and it works fine. But when I went to add a timer to my webpage I can’t use the above to change some text (the timer). So… I’m very confused. You have all helped me in other problems I have had… I research lots before bugging you all but I’m stumped & frustrated.
in signupForm.php – SNIPPIT
<title>Perry Computer Services - Signup</title>
<script src="js/commonUtils.js" type="text/javascript"></script>
<script src="js/validation.js" type="text/javascript"></script>
<script src="js/timers.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">window.onload = CreateTimer(30);</script>
in timers.js
function CreateTimer(Time)
{
alert("Timer created:" + Time);
document.getElementById('debug1').innerHTML = "WORKS";
alert("We never get here.");
}
in signupForm.php – SNIPPIT
<form name="form1" method="post" action="signupForm.php?calling_page=validateform" accept-charset="utf-8">
<table border="0" align="center">
<tr class="table_top">
<td class="tbl_col1"><div align="right" id="debug1"></div></td>
<td class="tbl_col2"><div align="left" id="debug2"></div></td>
Here’s what I’m confused about. I have another .js file called validation.js and I use the exact same document.getElementById as above in there and it works!!! I don’t get it!
In validation.js I modify the DOM a lot and it works great! Is it working because when I change a field by tabbing to the next field is this a SCOPE problem? If someone doesn’t know what I’m doing wrong I’ll try to chop up my validation.js and stick it in here but it’s huge. Why would 1 function work and another one in a different file not work?
You call
CreateTimerimmediately and assign its return value (undefined) toonload.At the time you call it, the element with the specified ID does not exist, and that line errors and stops the script from running any further.
Assign a function to onload.