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 trial

JavaScript Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perform: Traversing Elements with querySelector

Posted by eli d
eli d
Courses Plus Student 2,510 Points

building 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
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

You 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
PLUS
eli d
Courses Plus Student 2,510 Points
eli d
eli d
Courses Plus Student 2,510 Points

yes .. 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>