how to make a <li> when clicked on a button js 1

how to make a
  • when clicked on a button js
    • example item

    Here is what the above code is Doing:
    1. We have a text input and a button.
    2. When the button is clicked, we want to take the value of the text input and add it to the list.
    3. We have a list with an example item.

    We’ll need to do the following:
    1. Add an event listener to the button.
    2. When the button is clicked, get the value of the text input.
    3. Add that value to the list.

    Let’s start with the event listener.

    document.getElementById(‘add’).addEventListener(‘click’, function() {
    // get the value of the input
    // add the value to the list
    });

    Now we need to get the value of the input.

    document.getElementById(‘add’).addEventListener(‘click’, function() {
    var value = document.getElementById(‘text’).value;
    // add the value to the list
    });

    Now we need to add the value to the list.

    document.getElementById(‘add’).addEventListener(‘click’, function() {
    var value = document.getElementById(‘text’).value;
    document.getElementById(‘list’).innerHTML += ‘

  • ‘ + value + ‘
  • ‘;
    });

    Now we have a working to-do list!

    */

    // var todos = [“Buy New Turtle”];

    // var input = prompt(“What would you like to do?”);

    // while(input !== “quit”){
    // //handle input
    // if(input === “list”) {
    // listTodos();
    // } else if(input === “new”) {
    // addTodo();
    // } else if(input === “delete”) {
    // deleteTodo();
    // }
    // //ask again for new input
    // input = prompt(“What would you like to do?”);
    // }
    // console.log(“OK, YOU QUIT THE APP”);

    // function listTodos(){
    // console.log(“**********”);
    // todos.forEach(function(todo, i){
    // console.log(i + “: ” + todo);
    // });
    // console.log(“**********”);
    // }

    // function addTodo(){
    // //ask for new todo
    // var newTodo = prompt(“Enter new todo”);
    // //add to todos array
    // todos.push(newTodo);
    // console.log(“Added Todo”);
    // }

    // function deleteTodo(){
    // //ask for index of todo to be deleted
    // var index = prompt(“Enter index of todo to delete”);
    // //delete that todo
    // //splice()
    // todos.splice(index,1);
    // console.log(“Deleted Todo”);
    // }

    //Version 2

    var todos = [“Buy New Turtle”];

    var input = prompt(“What would you like to do?”);

    while(input !== “quit”){
    //handle input
    if(input === “list”) {
    listTodos();
    } else if(input === “new”) {
    addTodo();
    } else if(input === “delete”) {
    deleteTodo();
    }

    Similar Posts