parsing errors and such

I'm updating an exercise I completed to conform to xhtml transitional and eventually to DOM scripting. On my way there I have two document.write statements that SGML parser flags because it thinks the <options> element is not closed AND that my <script> elements are in an illegal place (see comments in code below).

I also have an a getElementById accessor that fails and I'm not understanding why? The var has content and a preceeding like statement works just fine?

Lastly, the code works, but, I'm confused over reset and reload. I know the difference between hard and soft reload, and that reset is form related, but, when I reset the form the dates in the input elements are reset to the 'base' date from the onload function; if I reload or refresh the page then the dates are set to the current date. My question how is reset getting the 'base' dates since it does not appear to do a reload?

I know I've poo-pooed document.write and innerHTML but I still need to know how that work. My DOM scripting skills just aren't there yet. Included below is the entire script that can be cut and pasted for your convenience. As always, Thanks all!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title>select &amp; date calculations</title>
<script type="text/javascript">
/* <![CDATA[ */
function writeOptions(startNumber, endNumber)
{
 var optionCounter;
 for (optionCounter = startNumber; optionCounter <= endNumber; optionCounter++)
 {
 //*******THIS CREATES STANDARD ERROR FROM SGML PARSER*******
 document.write("<option value = " + optionCounter + ">" + optionCounter + "<\/option>");
 }
}
function writeMonthOptions()
{
 var theMonth;
 var monthCounter;
 var theDate = new Date(1);
 for (monthCounter = 0; monthCounter < 12; monthCounter++)
 {
 theDate.setMonth(monthCounter);
 theMonth = theDate.toString();
 theMonth = theMonth.substr(4,3);
 
 //*******THIS CREATES STANDARD ERROR FROM SGML PARSER*******
 document.write("<option value = " + theMonth + ">" + theMonth + "<\/option>");
 }
}
function recalcDateDiff() 
{
var myForm = document.forms["form1"];
var firstDay = myForm.firstDay.options[myForm.firstDay.selectedIndex].value;
var secondDay = myForm.secondDay.options[myForm.secondDay.selectedIndex].value;
var firstMonth = myForm.firstMonth.options[myForm.firstMonth.selectedIndex].value;
var secondMonth = myForm.secondMonth.options[myForm.secondMonth.selectedIndex].value;
var firstYear = myForm.firstYear.options[myForm.firstYear.selectedIndex].value;
var secondYear = myForm.secondYear.options[myForm.secondYear.selectedIndex].value;
var firstDate = new Date(firstDay + " " + firstMonth + " " + firstYear);
var secondDate = new Date(secondDay + " " + secondMonth + " " + secondYear);
var daysDiff = (secondDate.valueOf() - firstDate.valueOf());
 
 daysDiff = Math.floor(Math.abs((((daysDiff / 1000) / 60) / 60) / 24));
 myForm.txtDays.value = daysDiff;
 
 return true;
}
function window_onload()
{
var theForm = document.forms["form1"];
var nowDate = new Date();
theForm.firstDay.options[nowDate.getDate() - 1].selected = true;
theForm.secondDay.options[nowDate.getDate() - 1].selected = true;
theForm.firstMonth.options[nowDate.getMonth()].selected = true;
theForm.secondMonth.options[nowDate.getMonth()].selected = true;
theForm.firstYear.options[nowDate.getFullYear() - 1970].selected = true;
theForm.secondYear.options[nowDate.getFullYear() - 1970].selected = true;

//WORKS JUST FINE: this is the preceeding like statement
document.getElementById("txtDays").value=0;

var curTime = new Date();
myMonth = curTime.toString();
myMonth = myMonth.substr(4,3);
var myDay = curTime.getDate();
var myYear = curTime.getFullYear();
var strToday = myDay + "-" + myMonth +"-" + myYear;

//*******BUT THIS DOES NOT WORK*******
document.getElementById("textDate").text=strToday;

//THIS WORKS JUST FINE
document.getElementById("innerHTMLDate").innerHTML=strToday;
}
/* ]] */
</script>
</head>
<body onload="return window_onload()">

<p>textDate:</p><div id="textDate"></div><hr />
<p>innerHTMLDate:</p><div id="innerHTMLDate"></div><hr />
<p>domDate:</p><div id="domDate"></div><hr />

<form id="form1" name="form1" action="text_js_select_dateCalcs.htm" >
<p>
First Date<br />
<select name="firstDay" onchange="return recalcDateDiff()">
<script type="text/javascript">
/* <![CDATA[ */
 writeOptions(1,31);
/* ]] */
</script>
</select>
<select name="firstMonth" onchange="return recalcDateDiff()">
<script type="text/javascript">
/* <![CDATA[ */
writeMonthOptions();
/* ]] */
</script>
</select>
<select name="firstYear" onchange="return recalcDateDiff()">
<script type="text/javascript">
/* <![CDATA[ */
writeOptions(1970,2020);
/* ]] */
</script>
</select>
</p>
<p>
Second Date<br />
<select name="secondDay" onchange="return recalcDateDiff()">
<script type="text/javascript">
/* <![CDATA[ */
writeOptions(1,31);
/* ]] */
</script>
</select>
<select name="secondMonth" onchange="return recalcDateDiff()">
<script type="text/javascript">
/* <![CDATA[ */
writeMonthOptions();
/* ]] */
</script>
</select>
<select name="secondYear" onchange="return recalcDateDiff()">
<script type="text/javascript">
/* <![CDATA[ */
writeOptions(1970,2020);
/* ]] */
</script>
</select>
</p>
Total difference in days
<input type="text" id="txtDays" name="txtDays" value=0 readonly>
<input type="reset" id="txtDays" name="txtDays" value="reset">
<br />
</form>
</body>
</html>

parsing errors and such

sgml parser errs and reset v reload

nyteshade

penders

nyteshade

penders

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week