I'm trying to create a to-do list app but i cant seems to append the user data to my list
html:
<div id="Html">
<input id="input-task" placeholder="New Task" >
<button id="add-btn" type="button" onclick="newTask()">
Add Tasks
</button>
</div>
<div>
<ul id="task-table">
<li>Task 1</li>
</ul>
</div>
separate javascript file:
const inputTask = document.getElementById('input-task').value;
var li = document.createElement('li');
var t = document.createTextNode('inputTask');
li.appendChild(t);
document.getElementById('task-table').appendChild(li);
}
inputTask is variable containing the text value but you using that as if it is string, remove the quotes around it.
I will also suggest you to avoid inline event handler, you can use addEventListener() instead like the following way:
document.getElementById('add-btn').addEventListener('click', newTask);
function newTask(){
const inputTask = document.getElementById('input-task').value;
var li = document.createElement('li');
var t = document.createTextNode(inputTask); //remove quotes here
li.appendChild(t);
document.getElementById('task-table').appendChild(li);
}
<div id="Html">
<input id="input-task" placeholder="New Task" >
<button id="add-btn" type="button">
Add Tasks
</button>
</div>
<div>
<ul id="task-table">
<li>Task 1</li>
</ul>
</div>
Try like this.
You should call newTask function and append child in it.
const inputTask = document.getElementById('input-task').value;
function newTask(){
var li = document.createElement('li');
var t = document.createTextNode(document.getElementById('input-task').value);
li.appendChild(t);
document.getElementById('task-table').appendChild(li);
document.getElementById('input-task').value="";
}
<div id="Html">
<input id="input-task" placeholder="New Task" >
<button id="add-btn" type="button" onclick="newTask()">
Add Tasks
</button>
</div>
<div>
<ul id="task-table">
<li>Task 1</li>
</ul>
</div>
Nothing wrong in your code!
Simple fixed this line
var t = document.createTextNode('inputTask');
Remove ('' quotes)
var t = document.createTextNode(inputTask);
And Final thing I don't know may be you have already done this but I want to mention this
Wrap this code inside the newTask() function
Example: -
function newTask(){
const inputTask = document.getElementById('input-task').value;
var li = document.createElement('li');
var t = document.createTextNode(inputTask);
li.appendChild(t);
document.getElementById('task-table').appendChild(li);
}
Related
I am creating a todo app. I create add button which is working perfectly fine. But, the trash button it keeps on returning null value.
I can not find solution on the google i didnt find the solution.
Can Anybody Help me here
var todoList = document.getElementById("todolist");
var addBtn = document.getElementById("add-btn");
var taskName = document.getElementById("task-name");
var trashBtn = document.getElementById("trash");
addBtn.addEventListener("click", addFunction);
function addFunction() {
var task = document.createElement("div");
task.classList.add("task");
var tname = document.createElement("li");
tname.setAttribute("id", "li-task");
var trash = document.createElement("BUTTON");
trash.setAttribute("id", "trash");
trash.innerHTML = '<i class="fas fa-trash"></i>';
tname.appendChild(trash);
task.appendChild(tname);
todoList.appendChild(task);
}
console.log(trashBtn);
console.log(addBtn);
<div class="main">
<header>
<h1>Doer's List</h1>
</header>
<div class="add-task">
<form>
<input type="text" id="task-name">
<button id="add-btn" type="button"><i class="fas fa-plus-circle"></i></button>
</form>
</div>
<div class="to-do-list">
<ul id="todolist"></ul>
</div>
</div>
Help Here
You need to get the Trash Button by id AFTER you've added it to the page.
I instead of creating new variable trashBtn, I used the variable which is define when creating Elemnt.
I am facing a problem within JavaScript when I attempt to delete a li, it will delete the entire ul. Does anyone know a solution for this?
const add = document.querySelector(".add");
add.addEventListener("click", function() {
const cont = document.querySelector(".menu");
const input = document.querySelector(".put");
const newli = document.createElement("LI");
const text = document.createTextNode(input.value);
cont.append(newli);
newli.appendChild(text);
})
const remove = document.querySelector(".remove");
remove.addEventListener("click", function() {
const df = document.querySelector(".menu");
df.remove(newli);
})
<div class="parent-row">
<h1>Add a new Post </h1>
<div>
<input type="text" class="put">
<button class="add">Add a Post</button>
<button class="remove">Remove a Post</button>
</div>
<ul class="menu">
<li>Albenis</li>
</ul>
</div>
</div>
</div>
</div>
Solution
HTML:
<div class="parent-row">
<h1>Add a new Post</h1>
<div>
<input type="text" class="put" />
<button class="add">Add a Post</button>
<button class="remove">Remove a Post</button>
</div>
<ul class="menu">
<li>Albenis</li>
</ul>
</div>
JavaScript:
const add = document.querySelector(".add");
const remove = document.querySelector(".remove");
add.addEventListener("click", function () {
const cont = document.querySelector(".menu");
const input = document.querySelector(".put");
const newli = document.createElement("LI");
newli.innerText = input.value;
cont.append(newli);
});
remove.addEventListener("click", function () {
const df = document.querySelector(".menu");
df.firstElementChild.remove();
});
Working example: https://codesandbox.io/s/pensive-almeida-z82lr?file=/index.html:262-561
Your error
Your error was you were trying to get the newli constant from outside of its code block remember that const variables are scoped to there block.
A different way of doing this
This way is a bit more simplified and allows you to delete anyone of the posts not just the last added.
const postBtn = document.querySelector('#post')
const list = document.querySelector('#list')
postBtn.addEventListener('click', () => {
const text = document.querySelector('#post-text')
list.innerHTML += `<li>${text.value} <button id="remove" onclick="remove(event)">remove</button></li>`
text.value = ''
})
const remove = (e) => {
e.target.parentElement.remove()
}
<div>
<h1>Make a post</h1>
<input id="post-text" type="text" placeholder="Text"><button id="post">Post</button>
<ul id="list">
</ul>
</div>
I'm working with JavaScript and HTML and I would like to be able to add user input to a multilevel list in HTML. I have started by making a multilevel list in HTML. As an example I have made a list with Dog information.
<div>
<h3> Dogs </h3>
<ul id="myList">
<li><b>Dog Breeds</b>
<ul>
<li class="facts"> There are a approximately 340 recognized breeds.</li>
</ul>
</li>
<li><b>Dog Fur</b>
<ul>
<li class="facts"> Depending on the dogs, there are a lot of different kinds of fur.</li>
</ul>
</li>
</ul>
</div>
Underneath this list I have made 2 fields which can hold userinput and a button next to it which can add the typed in information to the list. My code for the button and type fields is the following:
<input type='text' id='input' placeholder="Title"/>
<button type="button" id="add">Add new dog fact</button><br>
<textarea id="input2" rows="5" cols="18" placeholder="The dog fact.."></textarea>
In order to add the input to the list, I have written this piece of code:
"myList" is the id I have given the unordered list.
document.getElementById("add").onclick = function() {
var title = document.getElementById("input").value;
var description = document.getElementById("input2").value;
var li = document.createElement("li");
li.textContent = title + description;
document.getElementById("myList").appendChild(li);
document.getElementById("input2").value = ""; // clears the value
document.getElementById("input").value = ""; // clears the value
My problem now, is that it will not be structured as I would like.
By using the code above, the output will be as following if I type in "Dog Size" as title and "Dogs can be both large and small." as the description:
Dog SizeDogs can be both large and small.
instead of:
Dog Size
Dogs can be both large and small.
Does anyone know how to change this, so the user input will be structured the same way the rest of the list is? So that the description will be nested within the title? I'm aware that it is because I have defined "li.textContent" as "title + description", I just don't know how else to add the description data. I have tried to create 2 new list elements in the javaScript code, but this just, as expected, creates 2 new list elements and then I tried to style the description-element with "title.style.listStyleType = "none";", but if I place it in the function, then the entire functions stops working. I'm very confused, and if anyone is able to help me I would be very grateful! Thank you :)
use innerHTML and add <br> between title and description.
document.getElementById("add").onclick = function() {
var title = document.getElementById("input").value;
var description = document.getElementById("input2").value;
var li = document.createElement("li");
li.innerHTML = title + "<br>" + description;
document.getElementById("myList").appendChild(li);
document.getElementById("input2").value = "";
document.getElementById("input").value = "";
}
<div>
<h3> Dogs </h3>
<ul id="myList">
<li><b>Dog Breeds</b>
<ul>
<li class="facts"> There are a approximately 340 recognized breeds.</li>
</ul>
</li>
<li><b>Dog Fur</b>
<ul>
<li class="facts"> Depending on the dogs, there are a lot of different kinds of fur.</li>
</ul>
</li>
</ul>
</div>
<input type='text' id='input' placeholder="Title" />
<button type="button" id="add">Add new dog fact</button><br>
<textarea id="input2" rows="5" cols="18" placeholder="The dog fact.."></textarea>
</div>
Instead of using onclick, use addEventListener and if you want to add the description(as ul) under the title, below is the code.
const list = document.querySelector('#myList');
document.querySelector('button#add')
.addEventListener('click', function() {
const title = document.querySelector('#input').value;
const description = document.querySelector('#input2').value;
const li = document.createElement('li');
li.innerHTML = `<b>${title}</b>`;
const ul = document.createElement('ul');
const childli = document.createElement('li');
childli.textContent = description;
ul.appendChild(childli);
li.appendChild(ul);
list.appendChild(li);
});
<div>
<h3> Dogs </h3>
<ul id="myList">
<li><b>Dog Breeds</b>
<ul>
<li class="facts"> There are a approximately 340 recognized breeds.</li>
</ul>
</li>
<li><b>Dog Fur</b>
<ul>
<li class="facts"> Depending on the dogs, there are a lot of different kinds of fur.</li>
</ul>
</li>
</ul>
</div>
<input type='text' id='input' placeholder="Title" />
<button type="button" id="add">Add new dog fact</button><br>
<textarea id="input2" rows="5" cols="18" placeholder="The dog fact.."></textarea>
I'm trying to learn JS and I decided to make a real app so that I can learn while I'm doing some stuff. I'm trying to make a TODO list app, I made the adding items but I can't figure out how to remove items when they got clicked.
Here's the code iteself:
MY TODO'S
<input id= "input" class="form-control" placeholder="Add items to your TODO list." type="text">
<button id="button" class="button btn btn-primary btn-block">Add</button>
<div class="items">
<ul id= "listGroup" class="list-group">
</ul>
</div> <!-- JS Items !-->
</div> <!-- End Div -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="app.js"></script>
JS:
var button1 = document.getElementById("button")
button1.addEventListener("click", addItem)
function addItem() {
let item = document.getElementById("input").value
let add = document.getElementById("listGroup")
let makeLi = document.createElement("li")
let makeText = document.createTextNode(item)
makeLi.className += "list-group-item"
let icon = document.createElement("i")
icon.className += "fa fa-times"
add.appendChild(makeLi).appendChild(makeText)
}
function revomeItem() {
}
var div1 = document.getElementById("div-01")
div1.addEventListener("click", removeItem);
function removeItem(e){
e.target.remove();
}
This should work..
makeLi.onclick = function(){
this.remove();
};
I am struggling with adding new "button" element into my "list". I was trying to append or someting els but doesn't work. It is not usual ul to li. If you ask why button parent it is form bootstrap list-group
UPDATE JS. IT is now adding "button but not corectlly.
<div class="list-group">
<button type="button" class="list-group-item">
<ul class="desc">
<li class="t-desc50">Add Device</li>
<li class="t-desc55"><i class="fa fa-plus fa-2x" aria-hidden="true"></i></li>
</ul>
</button>
<button type="button" class="list-group-item" id="new-item>
<ul class="desc">
<li class="t-desc">Lamp</li>
<li class="t-desc2">5 kwH</li>
<li class="t-desc3"><label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label></li>
</ul>
</button>
<button type="button" class="list-group-item" id="new-item>
<ul class="desc">
<li class="t-desc">AC</li>
<li class="t-desc2">5 kwH</li>
<li class="t-desc3"><label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label></li>
</ul>
</button>
</div>
JS
document.querySelector('.fa-plus').addEventListener('click', addItem
);
function addItem() {
var list = document.getElementById("list-group");
var li = document.createElement("button");
li.setAttribute('id', li);
li.appendChild(document.createTextNode(li));
list.appendChild(li);
}
If you want to add an element to the dom, you can use :
var element = document.createElement(tagName);
https://developer.mozilla.org/fr/docs/Web/API/Document/createElement
Then append your element.
You can add event listener to element, and add class before if you need.
Comment answer
The code you need is probably something like that :
function addItem() {
var list = document.getElementById('list-group')
//Button
var button = document.createElement('button');
button.classList.add("list-group-item");
//Ul
var ul = document.createElement('ul');
ul.classList.add("desc");
//li
var liFirst = document.createElement('li');
var liSecond = document.createElement('li');
var liThird = document.createElement('li');
liFirst.innerHTML = "Lamp"
liSecond.innerHTML = "5 kwH"
//Label
var label = document.createElement('label');
label.classList.add("switch");
var input = document.createElement('input');
input.type = 'checkbox';
var span = document.createElement('span');
span.classList.add("slider");
span.classList.add("round");
label.append(input)
label.append(span)
liThird.append(label)
ul.append(liFirst)
ul.append(liSecond)
ul.append(liThird)
button.append(ul)
list.append(button)
}
You need to pass the function as argument instead of calling it:
// wrong:
document.querySelector('.fa-plus').addEventListener('click', addElement());
// right:
document.querySelector('.fa-plus').addEventListener('click', addElement);
addEventListener expects a callback function, if you call the function first, you are sending the result of the function as argument, which is wrong.
You need to pass the addElement function instead, so the addEventListener calls it.
got it!
function addItem() {
var list = document.getElementById('list-group')
var button = document.createElement('button');
var ul = document.createElement('ul');
var liFirst = document.createElement('li');
var liSecond = document.createElement('li');
var liThird = document.createElement('li');
button.classList.add("list-group-item");
ul.classList.add("desc");
liFirst.classList.add("t-desc")
liSecond.classList.add("t-desc2")
liThird.classList.add("t-desc3")
liFirst.innerText = 'TV'
liSecond.innerText = '5kwh'
liThird.innerHTML = `<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>`
ul.append(liFirst)
ul.append(liSecond)
ul.append(liThird)
button.append(ul)
list.append(button)
}
There are several semantic errors in both the markup and the code. Firstly, <button type="button" class="list-group-item" id="new-item> misses the closing double quotes. Secondly, one should not use an id twice as the OP's example does with id="new-item. At third addEventListener misses its 3rd argument.
Besides that it will be hard if not impossible to capture any click event on the fa-plus classified <i/> element; one should use the whole button instead ... that's what a button is for.
Additionally one might rethink how to retrieve/query the structure one wants to add the new element to. I would suggest a more generic approach that retrieves the top most group parent from within the structure where the click event did occur, thus one can make use of more than just on list-group classified element.
Having sanitized the code the OP'S given example then might look similar to this ...
function getClosestParentByClassName(elm, className) {
while (elm && !elm.classList.contains(className)) {
elm = elm.parentNode;
}
return elm;
}
function addItem(evt) {
//console.log(evt.currentTarget);
var
groupParent = getClosestParentByClassName(evt.currentTarget, 'list-group'),
itemBlueprint = groupParent && groupParent.querySelector('.list-group-item.new-item'),
newGroupItem = (itemBlueprint && itemBlueprint.cloneNode(true)) || createDefaultItem();
//console.log(groupParent, itemBlueprint, newGroupItem);
if (newGroupItem) {
// do whatever needs to be done in order to place the right content into this structure.
groupParent.appendChild(newGroupItem);
}
}
getClosestParentByClassName(document.querySelector('.fa-plus'), 'list-group-item').addEventListener('click', addItem, false);
function createDefaultItem() {
var
renderContainer = document.createElement('div');
renderContainer.innerHTML = [
'<button type="button" class="list-group-item new-item">'
, '<ul class="desc">'
, '<li class="t-desc">#missing t-desc</li>'
, '<li class="t-desc2">#missing t-desc2</li>'
, '<li class="t-desc3">'
, '<label class="switch">'
, '<input type="checkbox">'
, '<span class="slider round"></span>'
, '</label>'
, '</li>'
, '</ul>'
, '</button>'
].join('');
return renderContainer.querySelector('button');
}
.as-console-wrapper { max-height: 100%!important; top: 0; }
<div class="list-group">
<button type="button" class="list-group-item">
<ul class="desc">
<li class="t-desc50">Add Device</li>
<li class="t-desc55"><i class="fa fa-plus fa-2x" aria-hidden="true"></i></li>
</ul>
</button>
<button type="button" class="list-group-item new-item">
<ul class="desc">
<li class="t-desc">Lamp</li>
<li class="t-desc2">5 kwH</li>
<li class="t-desc3">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</li>
</ul>
</button>
<button type="button" class="list-group-item new-item">
<ul class="desc">
<li class="t-desc">AC</li>
<li class="t-desc2">5 kwH</li>
<li class="t-desc3">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</li>
</ul>
</button>
</div>