create list item from input value

Question

I'm working on a to-do list project and I got a problem, I want that when I click on the submit button the input value becomes a list item but it doesn't work. here's the code:

let btn = document.getElementById('btn')
let txt = document.getElementById('txt')

btn.addEventListener('click', function(){
    let list = document.createElement('li')
    list.innerHTML = txt.value
})

<h1 id="title">To do list</h1>
    <div class="main">
        <input type="text" alt="type text here" id="txt">
        <button type="submit" id="btn">Submit</button>
    </div>

Does this answer your question? Add an element to the DOM with JavaScript — 0stone0
– 0stone0, Commented Oct 6, 2021 at 16:14
If the button is in a form, the form submit will happen before the JS completes. You either need to interrupt the default action of a submit button or change the button to type button in order to allow any JS DOM manipulation to occur — devlin carnate
– devlin carnate, Commented Oct 6, 2021 at 16:19

Lior Madav · Accepted Answer · 2021-10-06 16:18:18Z

2

you forgot document.body.appendChild(list);

answered Oct 6, 2021 at 16:18

Lior Madav

919 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

A Haworth · Accepted Answer · 2021-10-06 17:53:43Z

2

You need to have a ul (if it is to be an unordered list) element in your document - or to create one with JS, and then you need to add the new list items to that (not to the body).

Try this snippet (where the ul element is already in the document)

let btn = document.getElementById('btn')
let txt = document.getElementById('txt')
let ul = document.getElementById('ul');

btn.addEventListener('click', function() {
  let list = document.createElement('li')
  list.innerHTML = txt.value;
  ul.appendChild(list);
})

<h1 id="title">To do list</h1>
<div class="main">
  <input type="text" alt="type text here" id="txt">
  <button type="submit" id="btn">Submit</button>
</div>
<ul id="ul">
</ul>

answered Oct 6, 2021 at 17:53

A Haworth

37.5k4 gold badges17 silver badges17 bronze badges

Collectives™ on Stack Overflow

create list item from input value

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related