Adding a new list item to a todo list using jQuery?

Question

I am new to coding. I was trying to add input value to the givenToDos array, append this to #to-do-list div, then also append a COMPLETED button to each item. The following code is what I have tried. It is only showing the original 4 items in the array. I am stuck here, any help would be greatly appreciated.

$(() => {

const givenToDos = [
  'todo1',
  'todo2',
  'todo3',
  'todo4',
];




  $('#submit').on('click', function (e) {

    e.preventDefault();
    const $input = $('#input-box');
    const $newTodo = $input.val();
    givenToDos.push($newTodo);
    
    $input.val('');

  });


  for (let i = 0; i < givenToDos.length; i++) {

    const $given = $(
      `<div class='to-do-item' >${givenToDos[i]}<br /><button class='completed'>COMPLETED</button></div>`,
    );
    $('#to-do-list').append($given);
  }


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='input-box'>
<div id='to-do-list'></div>
<button id='submit'>submit</button>

Giventodos should be a variable and not a constant if you want to manipulate it. Change const to car — Lelio Faieta, Mar 29 '21 at 06:25
For real that will change with new value so is ok in this example - [look here](https://stackoverflow.com/a/23436563/12402732) — Simone Rossaini, Mar 29 '21 at 06:26

score 1 · Answer 1 · answered Mar 29 '21 at 06:36

Try this one

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='to-do-list'></div>
<hr>
<input type="text" id="input-box">
<button id="submit">Submit</button>
<style>
    .to-do-item {
        line-height: 25px;
        margin-top: 10px;
    }
    .to-do-item button {
        margin-left: 5px;
    }
</style>

<script>
    let givenToDos = [
        'todo1',
        'todo2',
        'todo3',
        'todo4',
    ];

    $(document).ready(function() {
        for (let i = 0; i < givenToDos.length; i++) {
            $('#to-do-list').append('<div class="to-do-item" ><strong>'+givenToDos[i]+'</strong><button class="completed">COMPLETED</button></div>');
        }

        $('#submit').on('click', function(e) {
            e.preventDefault();
            const $input = $('#input-box');
            const $newTodo = $input.val();
            givenToDos.push($newTodo);

            $('#to-do-list').append('<div class="to-do-item" ><strong>'+$newTodo+'</strong><button class="completed">COMPLETED</button></div>');
            $input.val('');
        });

    });
</script>

_Try this one_ is not a good explanation, please always try to explain your answer. — Simone Rossaini, Mar 29 '21 at 06:54

Simone Rossaini · Answer 2 · 2021-03-29T07:19:57.313

You must put all for and append into submit, so when they submit array will "re-loop" and append to to-do-list

$(() => {

  const givenToDos = [
    'todo1',
    'todo2',
    'todo3',
    'todo4',
  ];




    $('#submit').on('click', function (e) {

      e.preventDefault();
      const $input = $('#input-box');
      const $newTodo = $input.val();
      givenToDos.push($newTodo);
      $('#to-do-list').html('');
      $input.val('');
      for (let i = 0; i < givenToDos.length; i++) {

      const $given = $(
        `<div class='to-do-item' >${givenToDos[i]}<br /><button class='completed'>COMPLETED</button></div>`,
      );
      $('#to-do-list').append($given);
    }

    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='input-box'>
<div id='to-do-list'></div>
<button id='submit'>submit</button>

What i did?

Take all code and paste into submit
Add $('#to-do-list').html(''); for reset the list when re-submit

If you want the list print default first time just use it outside too

Example with function:

$(() => {

    const givenToDos = [
        'todo1',
        'todo2',
        'todo3',
        'todo4',
    ];

    AppendList(givenToDos);


    $('#submit').on('click', function (e) {

        e.preventDefault();
        const $input = $('#input-box');
        const $newTodo = $input.val();
        givenToDos.push($newTodo);
        $('#to-do-list').html('');
        $input.val('');
        AppendList(givenToDos);
    });
    function AppendList(array) {
        let todolist = document.getElementById('to-do-list');
        for (let i = 0; i < array.length; i++) {

            const $given = $(
                    `<div class='to-do-item' >${givenToDos[i]}<br /><button class='completed'>COMPLETED</button></div>`,
                    );
            $(todolist).append($given);
        }

    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='input-box'>
<div id='to-do-list'></div>
<button id='submit'>submit</button>

Thank you, i used $('.to-do-item').remove(); instead, because i forgot to mention that there is a
with text ''things that need to be done'' inside #to-do-list.. so $('#to-do-list').html(''); this will remove the
text — newtocode111, Mar 29 '21 at 23:19

Adding a new list item to a todo list using jQuery?

2 Answers2

with text ''things that need to be done'' inside #to-do-list.. so $('#to-do-list').html(''); this will remove the

text