I have an app with a few buttons, and every button has an element, button one has a "banana" and button 2 has an "apple", when the user clicks on those buttons, a new li element should be added to a list. Here is a JSFiddle with an example of the problem I'm running into:
https://jsfiddle.net/ejha3q94/
Only 1 li is created with every click and the elements are just added on that same li.
var newElement = document.createElement("li");
var newElText = document.createTextNode ("");
document.getElementById("itemOne").addEventListener("click", function() {
newElText = document.createTextNode("Banana");
document.getElementById("list").appendChild(newElement).appendChild(newElText);
});
document.getElementById("itemTwo").addEventListener("click", function() {
newElText = document.createTextNode("Apple");
document.getElementById("list").appendChild(newElement).appendChild(newElText);
});
How can I make it so every click is a new li element using only Javascript?
You can't reuse elements by reassigning them. You have to create a new element each time you wish to insert a new element into the DOM.
This solution creates a generic function addItem for your procedure. You can see all the element creation and DOM manipulation in one place.
// element references
var list = document.getElementById('list');
var appleBtn = document.getElementById('apple');
var bananaBtn = document.getElementById('banana');
// DOM manipulating function
function addItem(listElem, text) {
var li = document.createElement('li');
var textNode = document.createTextNode(text);
listElem.appendChild(li).appendChild(textNode);
}
// event listeners
appleBtn.addEventListener('click', function(event) {
addItem(list, 'apple');
});
bananaBtn.addEventListener('click', function(event) {
addItem(list, 'banana');
});
<ul id="list"></ul>
<button id="apple">Apple</button>
<button id="banana">Banana</button>
But even repeating addItem(list, *) can get repetitious too. Plus, we don't necessarily need one event listener per button. Wouldn't it be nice if we could just use a single event listener to handle all of the cases?
The solution below uses a data-* attribute to store each button's contribution to the list. Then, using event delegation we handle all buttons with a single event listener (function).
// element references
var list = document.getElementById('list');
var buttons = document.getElementById('buttons');
// single #buttons event delegate
buttons.addEventListener('click', function(event) {
// event.target contains the element that was clicked
var item = event.target.dataset.item;
if (item === undefined) return false;
var li = document.createElement('li');
var textNode = document.createTextNode(item);
list.appendChild(li).appendChild(textNode);
});
<ul id="list"></ul>
<div id="buttons">
<button data-item="apple">Apple</button>
<button data-item="banana">Banana</button>
<button data-item="orange">Orange</button>
<button data-item="grape">Grape</button>
<button data-item="plum">Plum</button>
</div>
Make sure that var newElement and newElText is created or cloned on every click instead of referenced: https://jsfiddle.net/ejha3q94/2/
Otherwise it won't create a new list element but modifies the existing list element every time.
document.getElementById("itemOne").addEventListener("click", function() {
var newElement = document.createElement("li");
var newElText = document.createTextNode("Banana");
document.getElementById("list").appendChild(newElement).appendChild(newElText);
});
document.getElementById("itemTwo").addEventListener("click", function() {
var newElement = document.createElement("li");
var newElText = document.createTextNode("Apple");
document.getElementById("list").appendChild(newElement).appendChild(newElText);
});
You can use document.querySelectorAll() with selector "[id^=item]"; iterate elements using for..of loop; create the elements within click event handler; append #text node to li element using HTMLElement.dataset before appending li element to ul element
<div id="itemOne" data-fruit="Banana">
🍌
</div>
<div id="itemTwo" data-fruit="Apple">
🍎
</div>
<ul id="list"> </ul>
<script>
var list = document.getElementById("list");
for (el of document.querySelectorAll("[id^=item]")) {
el.addEventListener("click", function() {
list.appendChild(document.createElement("li"))
.textContent = this.dataset.fruit;
})
}
</script>
jsfiddle https://jsfiddle.net/ejha3q94/4/
There can only be a single newElText node. If you append it multiple times, it will just be moved. You should clone it manually:
var newElement = document.createElement("li");
var list = document.getElementById("list");
document.getElementById("itemOne").addEventListener("click", function() {
var newElText = document.createTextNode("Banana");
list.appendChild(newElement.cloneNode(false)).appendChild(newElText);
});
document.getElementById("itemTwo").addEventListener("click", function() {
var newElText = document.createTextNode("Apple");
list.appendChild(newElement.cloneNode(false)).appendChild(newElText);
});
<div id="itemOne">🍌</div>
<div id="itemTwo">🍎</div>
<ul id ="list"></ul>
Related
I need to clone a div that contains an input file, and within the clone, there is a button to delete the created clone.
My problem is that once the clone is created I cannot add the function on the button to delete the clone.
The function does not work. Where am I wrong?
if (document.querySelector('.clona-input-file') !== null) {
var clonaInputFile = document.querySelector('.clona-input-file');
clonaInputFile.addEventListener('click', function(e) {
e.preventDefault();
var RowDaClonare = document.querySelector('#row-da-clonare');
var clone = RowDaClonare.cloneNode(true);
clone.children[0].lastElementChild.value = '';
clone.id = 'row-da-clonare-' + Date.now();
RowDaClonare.after(clone);
var _buttonDel = document.createElement("button");
_buttonDel.id = 'cancellaInputClone';
_buttonDel.type = 'button';
_buttonDel.setAttribute("data-id-da-eliminare", clone.id);
_buttonDel.classList.add("btn");
_buttonDel.classList.add("btn-danger");
_buttonDel.classList.add("cancellaInputClone");
_buttonDel.innerHTML = '<i class="bi bi-trash-fill"></i>';
clone.appendChild(_buttonDel);
});
}
var cloneSet = document.querySelectorAll(".cancellaInputClone");
for (var i = 0; i < cloneSet.length; i++) {
cloneSet[i].addEventListener('click', fx_button);
}
function fx_button() {
console.log(this)
}
The issue is because you're attempting to bind event handlers to elements which don't yet exist in the DOM. This can be addressed by delegating your event handlers to parent elements which do exist when the DOM loads, and interrogating the events to see if they were raised by the elements you created.
In addition there's some other issues in your code to address:
Firstly, don't use id attributes in dynamic content. It makes your logic more complex than it needs to be. Use classes instead, and relate elements to each other using DOM traversal methods, such as closest().
Secondly, use querySelector() to find the child element, not children/index accessors. It's more robust.
Lastly, you can provide multiple separate class names to classList.add() to save you having to call it repeatedly.
With that said, try this working example:
let cloneButton = document.querySelector('.clona-input-file');
if (cloneButton) {
cloneButton.addEventListener('click', function(e) {
e.preventDefault();
let rowDaClonare = document.querySelector('.row-da-clonare'); // querySelector will return first match only
let clone = rowDaClonare.cloneNode(true);
clone.querySelector('input').value = '';
rowDaClonare.after(clone);
let buttonDel = document.createElement("button");
buttonDel.type = 'button';
buttonDel.classList.add("btn", "btn-danger", "cancellaInputClone");
clone.appendChild(buttonDel);
let icon = document.createElement('i');
icon.classList.add('bi', 'bi-trash-fill');
buttonDel.appendChild(icon);
});
}
// icon click handler delegated to the .container element
document.querySelector('.container').addEventListener('click', e => {
let el = e.target;
if (!el.classList.contains('cancellaInputClone') && !el.closest('button')?.classList.contains('cancellaInputClone'))
return;
el.closest('.row-da-clonare').remove();
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<div class="container">
<button class="clona-input-file">Clone</button>
<div class="row-da-clonare">
<div>
Lorem ipsum dolor sit.
<input type="text" class="foo" />
</div>
</div>
</div>
According to your code, it looks like the button is created only when the clonaInputFile is clicked, but the querySelectorAll and loop and addEventListener executes right after you registered the callback for the clonaInputFil. So now there is no button you are querying, and the cloneSet should be empty, if you haven't created before.
Try log out the length of cloneSet. If it is 0, I recommend you to put the addEventListener('click', fx_button); right after the creation of that button.
so i wrote this code that would create a list and then append an input to it on click. really simple. but the problem is it doesn't work and i have no idea why
here is the code:
function pushing() {
var li = document.createElement("li");
var inputValue = document.getElementById("inp").value;
var pushchild = document.createTextNode(inputValue);
li.appendChild(pushchild);
}
sub.addEventListener("click", pushing);
the id inp is an input id. thank you
Add this to the last line of your function. Append your newly created li element to the ul.
document.querySelectorAll(‘ul’).appendChild(newCreatedLi);
Your list item is never appended to a list element.
// Cache the elements,
// add the button listener,
// & focus on the input
const list = document.querySelector('ul');
const input = document.querySelector('#inp');
const sub = document.querySelector('#sub');
sub.addEventListener('click', pushing);
input.focus();
function pushing() {
const li = document.createElement('li');
const text = document.createTextNode(input.value);
li.appendChild(text);
// Adding the list item to the list element
list.appendChild(li);
}
<input id="inp" />
<button id="sub">Click</button>
<ul></ul>
I'm trying to delete a <li> whenever the button inside its div is clicked. The problem is that it does not work for dynamically created <li>'s, while it does delete pre-made HTML content but only the first <li>.
This is what I've done so far
HTML
<ul>
<li>
<div class="content">
<div class="b-group>
<button id="delete"></button>
</div>
</div>
</li
</ul>
Javascript
var addButton = document.getElementById('add');
var delButton = document.getElementById('delete');
var list = document.querySelector('ul');
addButton.onclick = function() {
var newCon = document.createElement('li');
newCon.innerHTML =
'<div class="content">'
+'<div class="b-group">'
+'<button id="delete"></button>'
+'</div>'
+'</div>';
listOfRents.appendChild(newCon);
}
delButton.onclick = function() {
var bye = delete;
bye.parentNode.parentNode.parentNode.removeChild(bye.parentNode.parentNode);
}
You need to create the handler for the element upon creation of the new button, so for every new button that is create a new handler needs to be attached to that button. JavaScript doesn't automatically add click handlers to newly added items, you need to do that yourself. Here is an example:
var addButton = document.getElementById('add');
var delButton = document.getElementById('delete');
var list = document.querySelector('ul');
addButton.onclick = function() {
var newCon = document.createElement('li');
newCon.innerHTML =
'<div class="content">' +
'<div class="b-group">' +
'<button id="delete">DEL</button>' +
'</div>' +
'</div>';
list.appendChild(newCon);
// Get the new button in from the `newCon` element
let btn = newCon.querySelector('button')
// Attach an event to that button
btn.addEventListener('click', e => {
// Find the closest list item to the button and remove it
e.currentTarget.closest('li').remove()
})
}
<button id="add">ADD</button>
<ul></ul>
You can get your parent element using event.target and Element.closest().
Event.target
Identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to event.target which identifies the element on which the event occurred.
Element.closest()
The Element.closest() method returns the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter. If there isn't such an ancestor, it returns null.
var addButton = document.getElementById('add'),
ul = document.querySelector('ul');
addButton.onclick = function() {
var newCon = document.createElement('li');
newCon.innerHTML =
`<div class="content">
<div class="b-group">
<button name="del">DEL</button>
</div>
</div>`
ul.appendChild(newCon);
delButton = newCon.querySelector('[name=del]');
delButton.onclick = function(e) {
e.target.closest('li').remove()
}
}
<button id="add">ADD</button>
<ul>
</ul>
I am building a todo app where I am dynamically generating tasks using javascript.[]
I generate following equivalent html from js whenever I click on the add button:
<div class="row datasection">
<div class="todo">
<div class="databox col s6 offset-s1 waves-effect">
<p class="checkglyph1 checkglyph2">Task no 1</p>
<a>
<i class="material-icons checkglyph checkglyph1 checkglyph2 glyphcolor">check</i>
</a>
</div>
</div>
</div>
Now what I want is whenever I click event on the task created it should become yellow in colour.I have written the code to this. below.However it works fine only when there is one task created.If there is multiple then the last task works well but actionlistener on the first one does not seem to be working.I am not able to figure out where the code is breaking.
var glyph= document.querySelectorAll(".glyphcolor");
for (var i = 0; i < glyph.length; i++) {
glyph[i].addEventListener('click', function(event) {
this.classList.toggle("checkglyph1");
});
}
The actual snippet
//declaration
var calendardata = document.getElementById('date1');
var addbutton = document.querySelector('.addbutton');
var todo = document.querySelector('.todo');
addbutton.addEventListener('click', function() {
/* body to return the html */
if (data.value) {
var newdiv = document.createElement("div"); // Create a <button> element
newdiv.classList.add("databox", "col", "s6", "waves-effect");
//console.log(newdiv);
todo.appendChild(newdiv);
//console.log(newdiv.parentNode);
var newpar = document.createElement("p");
newpar.classList.add("checkglyph1", "checkglyph2");
var node = document.createTextNode(data.value + "." + " " +
calendardata.value);
var newa = document.createElement("a");
newdiv.appendChild(newa)
var newglyph = document.createElement("i");
newglyph.classList.add("material-icons", "checkglyph", "checkglyph1",
"checkglyph2", "glyphcolor");
var node1 = document.createTextNode("check");
newa.appendChild(newglyph);
newglyph.append(node1);
newpar.appendChild(node);
newdiv.appendChild(newpar);
data.value = "";
calendardata.value = "";
created = true;
// console.log("before glyh created");
//code to perform action on the click of the tick symbol
var glyph = document.querySelectorAll(".glyphcolor");
var par = document.getElementsByClassName('checkglyph2');
for (var i = 0; i < glyph.length; i++) {
//console.log("Inside the loop");
glyph[i].addEventListener('click', function.bind(event) {
this.classList.toggle("checkglyph1");
//console.log('Inside the click');
//console.log(i);
});
}
}
})
What's happening that when they other tasks are created they aren't being collected in the Node Collection, thus they have no event listener. What you can do is instead add the event listener to the container and change whichever item that was clicked in:
document.querySelector('ul').addEventListener('click', changeClass);
document.querySelector('#button').addEventListener('click', addLi);
function changeClass(e){
e.target.closest('li').classList.toggle('checkglyph1');
}
function addLi(e){
const new_li = document.createElement('li');
new_li.textContent = document.querySelectorAll('li').length + 1;
new_li.classList.add('checkglyph1');
document.querySelector('ul').appendChild(new_li);
}
li:not(.checkglyph1) {
background: #f00;
}
<button id="button">Add li</button>
<ul>
<li class="checkglyph1">1</li>
<li class="checkglyph1">2</li>
<li class="checkglyph1 red">3</li>
<li class="checkglyph1">4</li>
<li class="checkglyph1">5</li>
<li class="checkglyph1">6</li>
<li class="checkglyph1">7</li>
<li class="checkglyph1">8</li>
<li class="checkglyph1">9</li>
<li class="checkglyph1">10</li>
</ul>
The problem with your code is that everytime you click on ".addbutton", you're going through all of the ".glyphcolor"s element's in your DOM and adding a new onclick event listener. The last one created will work, but the others will have multiple event listeners repeated (yes, this is possible). So, when you click on an element that has two events telling it to toggle the "checkglyph1" class, it will do it twice. And of course, it will not change at all. You can easily see this happening, because all the odd elements in your page must work (they will toggle the class by odd times), while the even ones must not.
This can be corrected by adding the event listener directly on the element when you create it on the page. The code below must work fine:
//declaration
var calendardata = document.getElementById('date1');
var addbutton = document.querySelector('.addbutton');
var todo = document.querySelector('.todo');
addbutton.addEventListener('click', function() {
if (data.value) {
var newdiv = document.createElement("div"); // Create a <button> element
newdiv.classList.add("databox", "col", "s6", "waves-effect");
//console.log(newdiv);
todo.appendChild(newdiv);
//console.log(newdiv.parentNode);
var newpar = document.createElement("p");
newpar.classList.add("checkglyph1", "checkglyph2");
var node = document.createTextNode(data.value + "." + " " +
calendardata.value);
var newa = document.createElement("a");
newdiv.appendChild(newa)
var newglyph = document.createElement("i");
newglyph.classList.add("material-icons", "checkglyph", "checkglyph1",
"checkglyph2", "glyphcolor");
var node1 = document.createTextNode("check");
newa.appendChild(newglyph);
newglyph.append(node1);
newpar.appendChild(node);
newdiv.appendChild(newpar);
data.value = "";
calendardata.value = "";
created = true;
newglyph.addEventListener('click', function(event) {
event.preventDefault(); // Just to prevent non desired effects of click
newglyph.classList.toggle('checkglyph1');
}
}
}
And just small clarifications: you don't need the "bind" in your actual code.
glyph[i].addEventListener('click', function.bind(event) { // just type function(event)
this.classList.toggle('checkglyph1');...
Here is my code: http://jsfiddle.net/H5bRH/
Every time I click on the submit button, it should insert what I typed into a new li item.
But instead of that, it inserts what I typed the first time PLUS the new value that I typed. Play with my jsfiddle to see what I mean.
How do I fix this so that it only adds what the user inputs into the form?
I assume there's something wrong here:
function saveTweet() {
var tweet = document.getElementById("tweet");
var tweetName = tweet.value;
var li = document.createElement("li");
li.innerHTML = tweetName;
var ul = document.getElementById("tweets");
ul.appendChild(li);
}
You have attached 2 click event to save button.
button.onclick = saveTweet;
Using jQuery $("#saveTweet").click(function ()
$("#saveTweet").click(function () {
var tweet = document.getElementById("tweet");
var tweetName = tweet.value;
var li = document.createElement("li");
li.innerHTML = tweetName;
var ul = document.getElementById("tweets");
ul.appendChild(li);
$("li").slideDown("fast");
});
JSFiddle
Why not just reduce all that code to :
$("#saveTweet").click(function () {
$('#tweets').append('<li>' + $("#tweet").val() + '</li>')
$("li").slideDown("fast");
});
jsFiddle example
Instead of having two click handlers for the #saveTweet button, move the slideDown call to your saveTweet function.
function saveTweet() {
var tweet = document.getElementById("tweet");
var tweetName = tweet.value;
var li = document.createElement("li");
li.innerHTML = tweetName;
var ul = document.getElementById("tweets");
ul.appendChild(li);
$("li").slideDown("fast");
}
It happens because you bind two click handlers on the #saveTweet element.
One to add the content, and one to animate the li elements..
In your case the animated one is occuring first and the appending second.. so you always animate the previously added element...
Since you use jQuery anyway, why not use that for all your interactions ?
$(function () {
var button = $("#saveTweet");
button.on('click', function () {
var tweet = $("#tweet"),
ul = $("#tweets"),
tweetName = tweet.val(),
li = $('<li>', {html: tweetName});
ul.append(li);
li.slideDown("fast");
});
});
Demo at http://jsfiddle.net/gaby/Y9cY3/1/