CodingForums.com - View Single Post

roher4 · 05-14-2011, 02:53 AM

Could someone help me? I need to find my error. I'm nearly about to pull every hair out of my body. I'm trying to make a todo list web app with Javascript and not PHP. It nearly works, but I can't get this for loop to work. Could someone also help me get it working because I'm so close. Here's the source:

Javascript/JQuery

Code:

$(document).ready(function() {

	// Variable to get ids for the checkboxes
	var idCounter=1;
	$("#addButton").click(function(){
		if(idCounter>5){
			alert("Please add only five items at a time");
			return false;
		}

		var $textBoxArray =(idCounter);
		
		for (var i=1; i<idCounter; i++) {
			$textBoxArray[i]=$('<input/>').attr({ type: 'text', name:'text', value:'', id:"addTextBox"});
			$("#newTextBoxes").append$(textBoxArray[i]);
			idCounter++;
		}
		

	});

	$("#submit").click(function(){

				$("#addedItemsText").remove();

				
				for (var j=1; j<idCounter; j++) {
					var textEntered = $(textBoxArray[j]).val();
					
					var newTask = $('<p/>').text(textEntered).addClass("listitems");
					$("#addedItems").append(textBoxArray[j]);
				}

	});
	
	    });

HTML

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
	<title>To-do List</title>
	<link rel="stylesheet" href="style.css">

	</head>

	<body>
		<p id="header">To Do List</p>

		<div id="list" class="list">
			<form id="todoListForm" method="get">
				<div id="item" class="item">
					<input type="text" name="add" id="addTextBox" />
					<input type="button" value="+" id="addButton" />
					<!--New text boxes will appear here. -->
					<div id="newTextBoxes"></div>
					<input type="button" value="Add Items" id="submit">
					<div class="listitems">
						<p id="addedItemsTitle">Added Items</p>
						<hr>
						<p id="addedItemsText"> Items added above will be displayed here.</p>
						<div id="addedItems"></div>
					</div>

				</div>
			</form>
		</div>

		<div class="footer" id="footer">
			
		</div>

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
		<script src="scripts.js"></script>

	</body>

	</html>