CODEWITHSUNDEEP
javascripthtml
Luann Sapucaia
Luann Sapucaia

Reputation: 75

Button that creates a <li> and adds user input on it

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();
    }
});

the interface of the site

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

Upvotes: 1

Views: 3585

Answers (3)

Boris Lipschitz
Boris Lipschitz

Reputation: 1631

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"/>

Upvotes: 5

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92367

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>

Upvotes: 1

NoNickAvailable
NoNickAvailable

Reputation: 398

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) " ..).

Upvotes: 1

Related Questions