Spotted a number of problems. Take a look at this version versus your postings.
Obvious ones are:
1. There is no .innerText that I know of. Changed to .innerHTML
2. Changed the onchange() to onblur() for your DOB calculations. Otherwise you could not enter anything without getting a bunch of alerts
3. Cannot calculate the difference between 'now' (a date) and 'dob' (a string) without changing to the same type object (date)
Note: You should enclose your script between [ code] and [ /code] tags (without the spaces)
to make your program easier to read, copy, test and/or review for other forum members.
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<head>
<title>Lab1</title>
<!-- script type="text/javascript" src="JS/lab1.js" -->
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?266537-Calculating-age&p=1228527#post1228527
window.onload = function(){
var para = document.getElementById("heading");
para.innerText = "A short exercise on creating dynamic web content."; // Note error here...
var button = document.getElementById("button"); // get the button element
button.onclick = function(){ // Attach a function to it
alert("I've been clicked");
};
var list = document.getElementById("list");
list.onchange = function(){
var item = list.options[list.selectedIndex].text; // This code extracts the text
changeColour(item); // from the selected item in
};
// list (at the .onchange event)
var dob = document.getElementById("dob");
// dob.oninput = function(){
dob.onblur = function(){
alert("your date of birth is: " + dob.value);
daysOld(dob.value);
};
var range = document.getElementById("range");
var value = document.getElementById("value");
range.onchange = function () {
value.innerHTML = range.value;
};
function daysOld(dobValue){
var tmp = dobValue.split('-');
var DOB = new Date(tmp[0],tmp[1],tmp[2]);
var msPerDay = 1000 * 60 * 60 * 24,
now = new Date(),
diff = now - DOB;
var age = diff / msPerDay;
alert("you are: " + age+ ' days old');
return diff/msPerDay;
}
function changeColour(colour){
var c = 0;
switch(colour){
case "White": c = "#fff"; break;
case "Red": c = "#f00"; break;
case "Green": c = "#0f0"; break;
case "Blue": c = "#00f"; break;
}
document.bgColor = c;
}
}
</script>
</head>
<body>
<heading><h1>HTML5 Test Page</h1>
<p id="heading"></p> </heading>
<p id="test"></p>
<button id="button">Press Me</button>
<p/>
Colours:
<select id="list">
<option>White</option>
<option>Red</option>
<option>Green</option>
<option>Blue</option>
</select>
<p/>
Your Birthday: <input type="date" id="dob" value="2007-08-16"/>
<p />
A Number: <input type="range" id="range" min="1" max="10" value="1">
<span id="value">1</span>
</body>
</html>
