I would like to display the title of a task when onclick, it gives me "remove" text(span) as well. I tried to display my task without remove when a user clicks on each list... but it wont work..
I also want to remove each list when a user clicks on the remove button.. Can you give me some tips? I have tried multiple ways.. but it wont work :(
I have attached the image of my to do list app.
I appreciate it in advance!
var title = document.getElementById('title');
var list = document.getElementById('list');
var li = list.getElementsByTagName('li');
var addBtn = document.getElementById('add-btn');
var i;
var span = document.getElementsByTagName('span');
var listspan = document.getElementById('list-span');
list.addEventListener('click', activeItem);
function activeItem(event) {
if (event.target.nodeName == 'LI') {
document.getElementById("list-span").style.visibility = "";
title.innerHTML = event.target.innerText;
for (var i = 0; i < event.target.parentNode.children.length; i++) {
event.target.parentNode.children[i].removeAttribute('class');
}
event.target.setAttribute('class', 'active');
}
}
addBtn.addEventListener('click', function() {
var txt = prompt('add task');
list.innerHTML += '<li>' + txt + '<span>' + "REMOVE" + '</span>' + '</li>';
list.addEventListener('click', activeItem);
});
<section class="container">
<div class="header-div">
<h1 id='title'>ADD A TASK</h1>
</div>
<div class="button-div">
<button id="add-btn">ADD A TASK</button>
</div>
<div class="list-div">
<ul id='list'>
<li>Walk my dog<span id="list-span">remove</span></li>
<li>Go grocery shopping<span id="list-span">remove</span></li>
<li>Call mom<span id="list-span">remove</span></li>
<li>Do laundry<span id="list-span">remove</span></li>
<li>Call Jane<span id="list-span">remove</span></li>
<li>Eat lunch<span id="list-span">remove</span></li>
</ul>
</div>
</section>
Related
My drag and drop code does not apply to each new added list item individually, but instead applies to all the list items in one block. However, the purpose of the drag and drop is to make the list items individually sortable and draggable. Any clue to how to correct the code to apply to each new task/list item that is appended under the 'To Do' list?
var $addButton = $(".btn-primary");
var $removeButton = $(".btn-danger");
var $todoList = $(".uncomplete");
var $doneList = $(".completed");
//Take Text Input and Add <li> to To Do List
$addButton.on("click", function(){
//Creating object Variables
var $sort = $(".sort").val();
var $newTask = $(".newTask").val();
var $taskDescr = $(".taskDescr").val();
var $taskDate = $(".taskDate").val();
// var $category= $(".category").val();
var $category= $("input[type='radio'][name='category']:checked").val();
//var $importance = $("input[type='checkbox'][name='importance']:checked").val();
var $importance = $('<input type="checkbox" name="importance"/>').val();
var $newTaskString = $sort + ", " + $taskDescr + ", " + $newTask + ", " + $taskDate + ", " + $category + ", " + $importance + " ";
var $todoList = $(".uncompleted");
//call append method on $todoList
$todoList.append("<li>" + $newTaskString + "<button><span> Done</span></button><button><span> Remove</span></button></li>").addClass("todo");
//drag and drop array
function allowDrop(e)
{
console.log("allow drop");
e.preventDefault();
}
function drop(e)
{
console.log("drop");
e.preventDefault();
var data = e.dataTransfer.getData("text");
e.target.appendChild(document.querySelector("#" + data));
}
function drag(e)
{
console.log("dragging");
//e.preventDefault();
e.dataTransfer.setData("text", e.target.id);
}
function showAllUsers(){
let allUsersDiv=document.querySelector("#allUsersDiv");
for(var i=0; i < allUsers.length; i++)
{
var newUserDiv=document.createElement("DIV");
newUserDiv.setAttribute("draggable", "true");
newUserDiv.setAttribute("ondragstart", "drag(event)"); //"editUser(this)"
newUserDiv.setAttribute("id", ("userdiv-" + i));
newUserDiv.setAttribute("style", "border:1px solid red;");
var newUserEditLink = document.createElement("A");
newUSerEditLink.setAttribute("href", "#");
newUSerEditLink.setAttribute("onclick", "editUSer(this)");
newUserEditLink.innerHTML = "Edit";
newUserEditLink.setAttribute("id", ("edit-", + i));
newUserDiv.innerHTML=allUsers[i].username;
newUserDiv.appendChild(nowUserEditLink);
allUsersDiv.appendChild(newUserDiv);
}
}
<div class="list-wrap" contenteditable="false">
<div class="list-inner-wrap">
<h2 class="title">ToDo List</h2>
<h3 class="title">Add Task</h2>
<!--<h4>Task Name</h4>-->
<label for="sort">Sort Order:</label><input type="text" class="sort"
name="sort" id="sort" value="" placeholder="A,B,C,etc.">
<br> </div></div>
<button class="btn btn-primary">
<span class="glyphicon glyphicon-plus"> Add</span>
</button>
<h3 class="title">To Do</h2>
<h6><i>Click task item to edit or modify</i></h6>
<!--Change color of editable task -->
<div id='div' contenteditable='false' oninput='change()'>
<div id="allUsersDiv" ondragover="allowDrop(event)" ondrop="drop(event)" style="position:absolute;left:5px;top:450px;height:200px;width:500px; border: 1px solid black">
<div draggable="true" ondragstart="drag(event)">
<ul class="uncompleted" contenteditable="false" id="id01" >
<li>Need to be completed task
<button class="btn btn-success">
<span class="glyphicon glyphicon-ok"> Done</span>
</button>
<button class="btn btn-danger">
<span class="glyphicon glyphicon-remove"> Remove</span></button>
<br>
</li></ul>
</div></div></div>
I want to create a list of users. For each row I want to add the avatar, name and a button to open a modal with the user's profile. I am having trouble adding the "onClick"s to each button.
Ive searched and found multiple solutions that would require me to rewrite this whole function. I was wondering if there was a way to solve this and still get to keep the way I am implementing the ul's.
It is worth to mention that I am not using JQuery.
Here is the code:
const userList = document.querySelector('.userListDiv');
const setupUserList = (data, currentUser) => {
if(data.length) {
let html = '';
var list = [];
data.forEach(doc => {
const user = doc.data();
if(user.coachUid == currentUser.uid)
{
list.push(user);
}
});
list.forEach(user => {
const ul = `
<ul class="userListUl pull-right" style="border-left: 0px;">
<li>
<button class="button" id="myBtn"><i class="material-icons" style="font-size:48px;color:rgb(34, 34, 34)">person</i></button>
</li>
</ul>
<ul class="userListUl" style="border-right: 0px;">
<li>
<img src="https://www.w3schools.com/howto/img_avatar.png" class="userListImg" alt="Avatar">
</li>
<li>
<p class="userListP">${user.personal_info[0]} ${user.personal_info[1]}</p>
</li>
</ul>
`;
html += ul
});
userList.innerHTML = html;
}
}
<div class="userListDiv logged-in"></div>
Thanks in advance!
You could just add a snippet at the point you have added your HTML then you wont need to change any of your existing code? See comment/snippet below...
const userList = document.querySelector('.userListDiv');
const setupUserList = (data, currentUser) => {
if (data.length) {
let html = '';
const list = [];
data.forEach(doc => {
const user = doc.data();
if (user.coachUid == currentUser.uid) {
list.push(user);
}
});
list.forEach(user => {
const ul = `
<ul class="userListUl pull-right" style="border-left: 0px;">
<li>
<button class="button"><i class="material-icons" style="font-size:48px;color:rgb(34, 34, 34)">person</i></button>
</li>
</ul>
<ul class="userListUl" style="border-right: 0px;">
<li>
<img src="https://www.w3schools.com/howto/img_avatar.png" class="userListImg" alt="Avatar">
</li>
<li>
<p class="userListP">${user.personal_info[0]} ${user.personal_info[1]}</p>
</li>
</ul>
`;
html += ul
});
userList.innerHTML = html;
// Add event listener to buttons.
const buttons = userList.querySelectorAll('.userListUl .button');
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function() {
alert('Button clicked!');
});
}
}
}
In my to-do-list deleteButton and doneButton work only on premade tasks.
They arent working on created elements li even that created elements are the same as premade. I am trying to use vanila js.
js:
var deleteButton = document.querySelectorAll('.delete');
for(i = 0; i < deleteButton.length; i++){
deleteButton[i].addEventListener('click', function() {
var li = this.parentNode;
li.classList.add('li-delete');
})
};
var doneButton = document.querySelectorAll('.done');
for (i = 0; i < doneButton.length; i++)
doneButton[i].addEventListener('click', function(){
if (this.classList.contains('done-green')) {
this.classList.remove('done-green');
} else {
this.classList.add('done-green');
}
});
var add = document.querySelector('.add');
add.addEventListener('click', function(){
var newLi = document.createElement('li');
var input = document.querySelector('input');
var ul = document.querySelector('ul');
var newP = document.createElement('p');
newLi.innerHTML = "<i class='icon-ok done'></i><i class='icon-trash delete'></i>"
newP.appendChild(document.createTextNode(input.value));
newLi.appendChild(newP);
ul.appendChild(newLi);
input.value = null;
})
html:
<div id="buttons">
<input type="text" placeholder="your new task...">
<button type="submit" class="add">add</button>
</div>
<div id="tasks">
<ul>
<li><i class="icon-ok done"></i>
<p>asd</p>
<i class="icon-trash delete"></i></li>
<li><i class="icon-ok done"></i>
<p>asd</p>
<i class="icon-trash delete"></i></li>
<li><i class="icon-ok done"></i>
<p>asd</p>
<i class="icon-trash delete"></i></li>
</ul>
</div>
You must attach listener after creation element.
Or you can attach listener to parent container of elements.
I think this answer can help you Attach event to dynamic elements in javascript
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();
};
When I run the function in the browser, "[object Object]" shows up instead of the text stored inside the variable $new_comment. I wish to append user inputs.
HTML :
<li class="list-group-item">"User comments"</li>
<div class="comments">
<ul class="list-group"></ul>
</div>
Js :
var addCommentFromInputBox = function() {
var $new_comment;
if ($(".input-group input").val() !== "") {
$new_comment = $("<p>").text($(".input-group input").val());
$new_comment.hide();
$(".list-group").append('<li class="list-group-item">' + ($new_comment) + '</li>');
$new_comment.fadeIn();
$(".input-group input").val("");
}
};
Everything runs fine when I change the code to:
$(".list-group").append($new_comment);
But I wish to style it with Bootstrap.
You can use it something like this $(".list-group").append($('<li class="list-group-item"></li>').html($new_comment));
Here this the full demo code
addCommentFromInputBox = function() {
var $new_comment;
if ($(".input-group input").val() !== "") {
$new_comment = $("<p>").text($(".input-group input").val());
$new_comment.hide();
$(".list-group").append($('<li class="list-group-item"></li>').html($new_comment));
$new_comment.fadeIn();
$(".input-group input").val("");
}
}
addCommentFromInputBox();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comments">
<ul class="list-group">
</ul>
</div>
var listGroupItem = $('<li class="list-group-item"></li>').html($new_comment)
$(".list-group").append($listGroupItem);