Hey all,
I've been practicing JS and today I decided to create a "To Do" List.
So far, I've gotten everything working properly except the validDate function which makes sure the date entered is in a valid format (12.12.2012 or 12/12/2012, etc.) However, it's not working in any browsers. I used Chrome Dev tools and I keep getting an error "addDueDate" is not defined. Any idea but I'm doing wrong. I'm very new to Reg Expressions so i very well could have messes something up.
Code:
<html>
<head>
<title>Untitled</title>
</head>
<body>
<form name="list">
<input type="text" name="datedue" value="Date Due" /> <br />
<input type="text" name="todo" value="Task" /> <br />
<input type="button" name="button1" value="Submit" onclick="addList(); validDate()"/> <br />
</form>
<div id="todolist">
<table>
<tr>
<td>Due Date </td>
<td>Task</td>
</tr>
</table>
</div>
<script type="text/javascript">
function addList () {
var addDueDate=document.list.datedue.value;
var addToList=document.list.todo.value;
document.getElementById("todolist").innerHTML= "<table><tr><td> Due Date </td><td>Task</td></tr><tr><td>" + addDueDate + "</td><td> " + addToList +"</td></tr></table>";
}
var checkDateDue=document.list.datedue;
var checkToDo= document.list.todo;
checkDateDue.onfocus= function() {
if(checkDateDue.value=="Date Due") {
checkDateDue.value="";
}
}
checkToDo.onfocus= function() {
if(checkToDo.value=="Task") {
checkToDo.value="";
}
}
checkDateDue.onblur= function() {
if (checkDateDue.value =="") {
alert("please enter the due date");
checkDateDue.value="Date Due";
}
}
checkToDo.onblur=function() {
if (checkToDo.value=="") {
alert("Please enter your task");
checkToDo.value="Task";
}
}
function validDate() {
var re= /^\d{2}[.\/-]\d{2[.\/-]\d{4}$/;
if (re.test(addDueDate)== false) {
alert("please enter a valid date");
}
}
</script>
</html>