Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialeli d
Courses Plus Student 2,510 Pointsbuilding my own Interactive web pages with JS need help
here its the code that I ve been written
<div class="col-lg-8 col-lg-offset-2">
<table>
<ul >
<li>User name Email Phone Zip Code <button id="delbtn" class="delete btn btn-primary">DELETE</button></li>
<li>User name Email Phone Zip Code <button id="delbtn" class="delete btn btn-primary">DELETE</button></li>
</ul>
</table>
<form id="defaultForm" method="post" class="form-horizontal">
<fieldset>
<legend>VALID FORM</legend>
<div class="form-group">
<label class="col-lg-3 control-label">Username</label>
<div class="col-lg-5">
<input id="new-name" type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email address</label>
<div class="col-lg-5">
<input id="new-email" type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Phone number</label>
<div class="col-lg-5">
<input id="new-phone" type="text" class="form-control" name="phoneNumber" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Zip code</label>
<div class="col-lg-3">
<input id="new-zip" type="text" class="form-control" name="zipCode" />
</div>
</div>
</fieldset>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button id="addbtn" type="submit" class="btn btn-primary">Add to list</button>
</div>
</div>
</form>
</div>
</section>
<!-- :form -->
</div>
<div>
<!-- form: -->
</div>
</div>
var nameInput = document.getElementById('new-name');
var emailInput = document.getElementById('new-email');
var phoneInput = document.getElementById('new-phone');
var zipInput = document.getElementById('new-zip');
var addButton= document.getElementById("addbtn");
var deleteButton = document.getElementById("delbtn");
// add a new task
var addTask = function (){
console.log("add task");
//when the button is press /create a new line with /new- email/new-zip/buton delete
}
//delete task
var deleteTask= function() {
console.log("delete Task");
// when button is presses//remove line
}
var bindTaskEvents = function(taskListItem, currentTaskHolder){
console.log("bindTaskEvents to list Task");
//select its item
// var name = taskListItem.querySelector("button.delete")
/ var email = taskListItem.querySelector("button.delete")
// var phone = taskListItem.querySelector("button.delete")
// var zipUser =taskListItem.querySelector("button.delete")
var deleteButton = taskListItem.querySelector("button.delete");
//bind deleteTask to delete button
deleteButton.onclick = deleteTask;
}
addButton.onclick= addTask;
// cycle over current task holder ul list items
for (var i = 0; i < currentTaskHolder.children.length; i++) {
// bind all to list item children
bindTaskEvents(currentTaskHolder.children[i])
}
get the following errors Uncaught ReferenceError: currentTaskHolder is not defined(anonymous function) @ app2.js:37 index.htm:1 Uncaught SyntaxError: Unexpected end of input
2 Answers
Colin Bell
29,679 PointsYou don't have / var email = taskListItem.querySelector("button.delete")
line commented out properly. You only have one forward slash instead of two.
Also, you haven't defined currentTaskHolder
but you're using it in your for loop.
eli d
Courses Plus Student 2,510 Pointsyes .. I ve worked a bit at code and now I have . I CAN T FIGURE OUT HOW TO MAKE WORK CREATE BUTON AND DELETE BUTON .
<html><head> <title> newTodo App</title>
<link rel="stylesheet" href="" type="text/css" media="screen" charset="utf-8">
</head> <body> <div class="container"> <p> <label for="new-task">Add Item</label><input id="new-task" type="text"><button>Add</button> </p>
<h3>Todo</h3>
<ul id="current-tasks">
<li><label> Learn </label><button class="delete">Delete</button></li>
<li><label>Read</label><button class="delete">Delete</button></li>
</ul>
<script type="text/javascript" src="js/app.js"></script>
</body></html>
<SCRIPT> var taskInput = document.getElementById("new-task"); //new-task var addButton = document.getElementsByTagName("button")[0]; //first button var cTasksHolder = document.getElementById("current-tasks"); //current-tasks var delButton= document.getElementsByClassName("delete");
//Add a new task
var addTask = function() {
console.log("Add task...");
//When the button is pressed
//Create a new list item with the text from #new-task:
//input (checkbox)
//label
//button.delete
//Each elements, needs modified and appended
}
//Delete an existing task
var deleteTask = function() {
console.log("Delete task...");
//When the Delete button is pressed
//Remove the parent list item from the ul
}
//Set the click handler to the addTask function
addButton.onclick = addTask;
delButton.onclick = deleteTask;
//cycle cTasksHolder ul list
//for Each list item
// select its childern
//bind deleteTask to delete button
//var cTasksHolderChildren = cTasksHolder.children;
for (var i = 0; i < cTasksHolder.children.length; i++) {
console.log(cTasksHolder.children[i]);
// NOTE: elementChildren is a live list, adding or removing children from pEl
// will change the members of elementChildren immediately
deleteTask(cTasksHolder.children[i]);
}
<SCRIPT>
Kevin Faust
15,353 Pointsindoor voice fam