The exercise says that my button (like a submit) must use the information set by user in input tag and create an li tag with the text as content. It was my first JavaScript class, so I'm still not familiarised with the syntax.

This is my actual code. I used a querySelector with the id of my existing ul tag, and addEventListener to create an event for the click action. I can't remember how to properly create the new li tag, and don't know how to use the content as info for it.

let myElement = document.querySelector('#add-book');
myElement.addEventListener("click", (e) => {
if (e.target.classList == 'button-add') {
    let liElement = document.createElement('li');
    let content = document.appendChild(liElement);
    content.textContent();
    }
}); 

I hope the button works properly, and show the element in the page by clicking the button (with the typed information).

The exercise says that my button (like a submit) must use the information set by user in input tag and create an li tag with the text as content. It was my first JavaScript class, so I'm still not familiarised with the syntax.

This is my actual code. I used a querySelector with the id of my existing ul tag, and addEventListener to create an event for the click action. I can't remember how to properly create the new li tag, and don't know how to use the content as info for it.

let myElement = document.querySelector('#add-book');
myElement.addEventListener("click", (e) => {
if (e.target.classList == 'button-add') {
    let liElement = document.createElement('li');
    let content = document.appendChild(liElement);
    content.textContent();
    }
}); 

I hope the button works properly, and show the element in the page by clicking the button (with the typed information).

• javascript
• html

Share Improve this question Follow edited Jul 25, 2019 at 5:08 Kamil Kiełczewski 92.9k3434 gold badges395395 silver badges370370 bronze badges asked Jul 25, 2019 at 4:13 Luann SapucaiaLuann Sapucaia 7533 silver badges1212 bronze badges 1

• Can you show HTML code, too – Ngorld Commented Jul 25, 2019 at 4:28

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Oversimplified, but hey, it works:

function AddLi(str)
{
    var li = document.createElement('li');
    li.appendChild(document.createTextNode(str))
    li.innerHTML += ' <button onclick="this.parentNode.remove()">-</button>';
    document.getElementById("out").appendChild(li);
}

<form>
    <input type="text" name="userinput">
    <input type="button" value="Add LI" onclick="AddLi(userinput.value)">
</form> 
<span id="out"/>

I guess this is what you want:

(function () {
  document.querySelector('#add').addEventListener('click', function () {
    let input = document.querySelector('#text');
    let list = document.querySelector('#list'); 
    
    let item = document.createElement('li'); // create li node
    let itemText = document.createTextNode(input.value); // create text node
    
    item.appendChild(itemText); // append text node to li node
    list.appendChild(item); // append li node to list
    
    input.value = ""; // clear input
  });
})();

<div>
  <input id="text" type="text" />
  <button id="add">Add</button>
</div>

<ul id="list">
  <li>example item</li>
</ul>

But please, in the future, ask more specific questions. I don't even know what your problem is, because you don't provide all your code. Also the last sentence of your question is telling me nothing useful at all (.. "I hope the button works properly, and show the element in the page by clicking the button (with the typed information) " ..).

Try

function addBook(book) {
  list.innerHTML += 
    `<li>${esc(book.value)} <button onclick="del(this)">Del</button></li>`;
  book.value = '';
}

function del(item) {
  item.parentNode.remove();
}

function esc(s) {
    return s.replace(/[&"<>]/g,c => 
      ({'&':"&amp;",'"':"&quot;",'<': "&lt;",'>':"&gt;"}[c]));
}

<ul id="list"></ul>

<input id="data" type="text" />
<button onclick="addBook(data)">Add</button>