Skip to content

How do I take input via html input tag on button click and add it to a list USING JQUERY

I am a student and currently learning jquery <– I am trying to make the function that will take input from the inputbox and then add it to the unordered list as an EXTRA

  • Using jQuery create an input and a button. When clicking on the button it should invoke a function addToList that will use the input’s value to add it to the toDos variable. Make sure to render it on the screen as a new list item in the unordered list.

    const body = $("body");
    const header = $("<header>Todo List</header>");
    const unorderedList = $("<ul>unorderedlist</ul>");
    const testButton = $("<button>testButton</button>")
    const inputBox = $("<input></input>")
    var toDos = ["wake up", "eat breakfast", "code"];
    
    
    $("<ul>")
      .append(toDos.map((text) => $("<li>", { text })))
      .appendTo(document.body);
    
    testButton.on("click", () => {
        console.log("hello");
     .append(inputBox.text) => $("<li>", { text })
     .appendTo(document.body);
    });
    
    
      body.append(header);
      body.append(unorderedList);
      body.append(inputBox);
      body.append(testButton);
    
  • Answer

    You had several problems which I fixed:

    const body = $("body");
    const header = $("<header>Todo List</header>");
    const unorderedList = $("<ul></ul>");
    const testButton = $("<button>testButton</button>")
    const inputBox = $("<input></input>")
    var toDos = ["wake up", "eat breakfast", "code"];
    
    // Add toDos to the <ul>
    unorderedList.append(toDos.map((text) => $("<li>", { text })))
    
    // Add click handler to button:
    testButton.on("click", () => {
        console.log("hello");
        unorderedList.append($("<li>", { text: inputBox.val() }))
    });
    
    body.append(header);
    body.append(unorderedList);
    body.append(inputBox);
    body.append(testButton);