Don't see what I missed to get this working. I've looked over it a couple times bumping it to my book and didn't notice any difference. Anybody see what I missed? Thanks.

Jake

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Personal Organizer</title>
</head>
<body>
<script type="text/javascript">
<! HIDE FROM INCOMPATIBLE BROWSERS

function addTask() {
	if (document.forms[0].newtask.value == "")
		window.alert("You must enter a value in the New Task field.");
	else {
		if (document.forms[0].tasks.options.value == "tasks")
			document.forms[0].tasks.options[0] = null;
	var newTask = new Option();
	newTask.value = document.forms[0].newtask.value;
	newTask.text = document.forms[0].newtask.value;
	var numTasks = document.forms[0].tasks.options.length;
	document.forms[0].tasks.options[numTasks] = newTask;
	document.forms[0].newtask.value = "";
	}
}

function deleteTask() {
	var selectedTask = 0;
	var taskSelected = false;
	while (selectedTask < document.forms[0].tasks.length) {
		if (document.forms[0].tasks.options[selectedTask].selected == true) {
		taskSelected = true;
		break;
		}
		++selectedTask;
	}
	if (taskSelected == true)
		document.forms[0].tasks.options[selectedTasks] = null;
	else
		window.alert("You must select a task in the list.");
}

function ascendingSort() { 
	var newTasks = new Array();
	for (var i =0; i < document.forms[0].tasks.length; ++i) {
		newTasks[i] = document.forms[0].tasks.options[i].value;
	}
	newTasks.sort();
	for (var j =0; j < document.forms[0].tasks.length; ++j) {
		document.forms[0].tasks.options[j].value = newTasks[j];
		document.forms[0].tasks.options[j].text = newTasks[j];
	}
}

// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>

<h1>Personal Organizer</h1>
<h2>Task List</h2>
<form action="">
<p>New Task <input type="text" size="68" name=""newtask" /></p>
<p><input type="button" value="Add Task" onclick="addTask()"
style="width: 150px" />
<input type="button" value="Delete Selected Task"
onclick="deleteTask()" style="width: 150px" />
<input type="button" value="Delete All Tasks"
onclick="document.forms[0].task.options.length = 0;"
style="width: 150px" /><br />
<input type="button" value="Ascending Sort" 
onclick="ascendingSort()" style="width: 150px" />
</p>
<p><select name="tasks" size="10" style="width: 500px">
<option value="tasks">Tasks</option></select></p>
</form>
</body>
</html>

Recommended Answers

All 3 Replies

Not sure what it is supposed to do, but line 9 should be:

<!-- HIDE FROM INCOMPATIBLE BROWSERS

And on line 60:

name="newtask"

Thank you for that. Fixed 'em. Also my two "delete buttons" do not seem to work..Any idea? This stuff is aggravating!

What I posted below is supposed to be showing a calendar with the dates in it. Now why isn't it showing?

Is there a way that you guys easily read this stuff and see what is wrong by the different colors of the text? I really don't like wasting people's time and sometimes I feel that I am by posting things that are so easily fixed. Thanks again.

Jake

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Personal Organizer</title>
</head>
<body>
<script type="text/javascript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS

function addTask() {
	if (document.forms[0].newtask.value == "")
		window.alert("You must enter a value in the New Task field.");
	else {
		if (document.forms[0].tasks.options.value == "tasks")
			document.forms[0].tasks.options[0] = null;
	var newTask = new Option();
	newTask.value = document.forms[0].newtask.value;
	newTask.text = document.forms[0].newtask.value;
	var numTasks = document.forms[0].tasks.options.length;
	document.forms[0].tasks.options[numTasks] = newTask;
	document.forms[0].newtask.value = "";
	}
}

function deleteTask() {
	var selectedTask = 0;
	var taskSelected = false;
	while (selectedTask < document.forms[0].tasks.length) {
		if (document.forms[0].tasks.options[selectedTask].selected == true) {
		taskSelected = true;
		break;
		}
		++selectedTask;
	}
	if (taskSelected == true)
		document.forms[0].tasks.options[selectedTasks] = null;
	else
		window.alert("You must select a task in the list.");
}

function ascendingSort() { 
	var newTasks = new Array();
	for (var i =0; i < document.forms[0].tasks.length; ++i) {
		newTasks[i] = document.forms[0].tasks.options[i].value;
	}
	newTasks.sort();
	for (var j =0; j < document.forms[0].tasks.length; ++j) {
		document.forms[0].tasks.options[j].value = newTasks[j];
		document.forms[0].tasks.options[j].text = newTasks[j];
	}
}

function descendingSort() {
	var newTasks = new Array();
	for (var i =0; i < document.forms[0].tasks.length; ++i) {
		newTasks[i] = document.forms[0].tasks.options[i].value;
	}
	newTasks.sort();
	newTasks.reverse();
	for (var j =0; j < document.forms[0].tasks.length; ++j) {
		document.forms[0].tasks.options[j].value = newTasks[j];
		document.forms[0].tasks.options[j].text = newTasks[j];
	}
}

// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>

<h1>Personal Organizer</h1>
<h2>Task List</h2>
<form action="">
<p>New Task <input type="text" size="68" name="newtask" /></p>
<p><input type="button" value="Add Task" onclick="addTask()"
style="width: 150px" />
<input type="button" value="Delete Selected Task"
onclick="deleteTask()" style="width: 150px" />
<input type="button" value="Delete All Tasks"
onclick="document.forms[0].task.options.length = 0;"
style="width: 150px" /><br />
<input type="button" value="Ascending Sort" 
onclick="ascendingSort()" style="width: 150px" />
<input type="button" value="Descending Sort" 
onclick="descendingSort()" style="width: 150px" />
</p>
<p><select name="tasks" size="10" style="width: 500px">
<option value="tasks">Tasks</option></select></p>
</form>

<script type="text/javascript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS

document.write("<table Cellspacing='0' border='1'>");
var dateObject = new Date();
var month = dateObject.getMonth();
var monthArray = new
Array("January","February","March","April","May","June","July","August","September","October","November","December");

document.write("<caption><strong>" + monthArray[month] + "</strong></caption>");
document.write("<colgroup span='7' width='40' algin='center' />");
document.write("<tr><td>Sun</td></tr><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td></tr>");

dateObject.setDate(1);
var dateCounter = 1;
switch (dateObject.getDay()) {
	case 0:
		document.write("<tr>");
		for (var i=0; i<7; ++i) {
			document.write("<td>" + dateCounter + "</td>");
			++dateCounter;
			}
			document.write("</tr>");
			break;
	case 1:
		document.write("<tr><td>&nbsp;</td>");
		for (var i=0; i<6; ++i) {
			document.write("<td>" + dateCounter + "</td>");
			++dateCounter;
			}
			document.write("</tr>");
			break;
	case 2:
		document.write("<tr><td>&nbsp;</td><td>&nbsp;</td>");
		for (var i=0; i<5; ++i) {
			document.write("<td>" + dateCounter + "</td>");
			++dateCounter;
			}
			document.write("</tr>");
			break;
	case 3: 
		document.write("<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>");
		for (var i=0; i<4; ++i) {
			document.write("<td>" + dateCounter + "</td>");
			++dateCounter;
			}
			document.write("</tr>");
			break;
	case 4:
		document.write("<tr><td>&nbsp;</td><td>&nbsp;</td>");
		document.write("<td>&nbsp;</td><td>&nbsp;</td>");
		for (var i=0; i<3; ++i) {
			document.write("<td>" + dateCounter + "</td>");
			++dateCounter;
			}	
			document.write("</tr>");
			break;
	case 5:
		document.write("<tr><td>&nbsp;</td><td>nbsp;</td>");
		document.write("<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>");
		for (var i=0; i<2; ++i) {
			document.write("<td>" + dateCounter + "</td>");
			++dateCOunter;
			}
			document.write("</tr>");
			break;
	case 6:
		document.write("<tr><td>&nbsp;</td><td>&nbsp;</td>");
		document.write("<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>");
			for (var i=0; i<1; ++i) {
				document.write("<td>" + dateCounter + "</td>");
				++dateCounter
				}
				document.write("</tr>");
				break;

var numDays = 0;
// Jan,Mar,May,Jul,Aug,Oct,Dec
if (month == 0 || month == 2 || month == 4 || month == 6 || month == 7 || month == 9 || month == 11)
	numDays = 31;
//Feb
else if (month == 1)
	numDays = 28;
//Apr,Jun,Sep,Nov
else if (month == 3 || month == 5 || month == 8 || month == 10)
	numDays = 30;

for (var rowCounter = 0; rowCounter < 5; ++rowCounter) {
	var weekDayCounter = 0;
	document.write("<tr>");
	
	while (weekDayCounter < 7) {
		if (dateCounter <= numDays)
			document.write("<td>" + dateCounter + "</td>");
		else
			document.write("<td>&nbsp;</td>");
		++weekDayCounter;
		++dateCounter;
	}	

	document.write("</tr>");
}

document.write("</table>");

// STOP HIDING FROM INCOMPATIBLE BROWSERS
</script>

</body>
</html>

I am not sure if it is the right way to remove a DOM element by assigning a 'null' value to it. Anyway, your delete function may look like this instead...

function deleteTask() {
  var selectedTask = 0;
  var taskSelected = null;
  while (selectedTask < document.forms[0].tasks.length) {
    if (document.forms[0].tasks.options[selectedTask].selected == true) {
      taskSelected = document.form[0].tasks.options[selectedTask];
      break;
    }
   ++selectedTask;
  }
  if (taskSelected)
    taskSelected.parentNode.removeChild(taskSelected)  // delete it from parent
  else
    window.alert("You must select a task in the list.");
}

The same way you could do with insert in order to add a new node (using appendChild()).

By the way, the color mark on this site is to show different type of what the text should be -- comment, keyword, string, etc -- which should help in syntax checking, but it doesn't help to find bugs.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.