We Keep Coding

Handling Events for Many Elements - optimalizing my solution

I am building a simple shop website (just to practise) and even though my current solution works, from what I read it is not optimal and could be improved through creating event listener on the parent element (here it would be cart-items instead of on every anchor element. The problem is that when I attach event handler to it, then only the first input is changed if there are two or more elements in the basket, no matter which increase button I click (the one from product one, two, ect.).
My question is: in such case is attaching event listener to the parent element really the best option, and if yes, how can I properly refactor my code to make increase/decrease button work on their closest input value, not only on the first one from the rendered list?
Below I attach my current JS Code:
const qtyBoxes = document.querySelectorAll('.cart-qty-box');
qtyBoxes.forEach((box) => {
const increase = box.querySelector('.increase');
const decrease = box.querySelector('.decrease');
const currQty = box.querySelector('.currQty');
increase.addEventListener('click', function(e) {
e.preventDefault();
currQty.value++;
$('#przelicz').click(); //uptades UI
});
decrease.addEventListener('click', function(e) {
e.preventDefault();
if(currQty.value > 0) {
currQty.value--;
}
$('#przelicz').click(); //updates UI
});
});
HTML:
<div class="cart-items">
///... Item 1 code ...
<div class="qty-box">
<div class="qty-ctl">
<a class="incr-btn decrease" data-action="decrease" href="#"></a>
</div>
<input id="qnt" class="qty currQty input-text" type="text" value="{$poz->count}"/>
<div class="qty-ctl">
<a class="incr-btn increase" data-action="increase" href="#"></a>
</div>
</div>
///... Item 2 code ...
<div class="qty-box">
<div class="qty-ctl">
<a class="incr-btn decrease" data-action="decrease" href="#"></a>
</div>
<input id="qnt" class="qty currQty input-text" type="text" value="{$poz->count}"/>
<div class="qty-ctl">
<a class="incr-btn increase" data-action="increase" href="#"></a>
</div>
</div>
</div>
Here I paste a link to the image if the description of what I am trying to build is not clear:
screenshot of basket

Yes, it is better to attach the event listener to the parent, because you have only one listener instead of multiple listeners (one for every button).
You can achieve this by checking to which box the target of the click-event (e.target) belongs:
const click_parent = e.target.closest('.qty-box');
and if it's an increase- or decrease-button, for example:
if (e.target.classList.contains('increase')) {
The rest works like in your snippet.
Working example:
document.querySelector('.cart-items').addEventListener('click', function(e) {
e.preventDefault();
const click_parent = e.target.closest('.qty-box');
const currQty = click_parent.querySelector('.currQty');
if (e.target.classList.contains('increase')) {
currQty.value++;
$('#przelicz').click(); //uptades UI
} else if (e.target.classList.contains('decrease')) {
if (currQty.value > 0) {
currQty.value--;
}
$('#przelicz').click(); //uptades UI
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cart-items">
///... Item 1 code ...
<div class="qty-box">
<div class="qty-ctl">
<a class="incr-btn decrease" data-action="decrease" href="#">decrease</a>
</div>
<input id="qnt" class="qty currQty input-text" type="text" value="2" />
<div class="qty-ctl">
<a class="incr-btn increase" data-action="increase" href="#">increase</a>
</div>
</div>
///... Item 2 code ...
<div class="qty-box">
<div class="qty-ctl">
<a class="incr-btn decrease" data-action="decrease" href="#">decrease</a>
</div>
<input id="qnt" class="qty currQty input-text" type="text" value="3" />
<div class="qty-ctl">
<a class="incr-btn increase" data-action="increase" href="#">increase</a>
</div>
</div>
</div>

Why is my javascript code duplicating li?

I am a Javascript beginner (this is my first javascript program) and I have a few problems with my mini app...
I am trying to build a page that allows you to choose who was in your team working with you today. The user should be able to build his own list among a list of names.
When the user clicks on "Add to the team", it should remove the corresponding <li> and add it to the selected list below.
The button needs to change from Add to the team to Delete
I am struggling to change the button textcontent if user choose to add then remove then add the same <li>...
I've been trying a lot of things, this is my last try:
'script type="text/javascript"';
var selected = document.querySelector('#selected-list ul');
var team = document.querySelector('#team-list ul');
var searchBar = document.forms['search-employees'].querySelector('input');
//add to the selected team
team.addEventListener("click", function(e){
if(e.target.className == 'add'){
const li = document.createElement('li');
const employeename = document.createElement('span');
const deleteBtn = document.createElement('span');
//add content
deleteBtn.textContent = 'add';
employeename.textContent = e.target.parentElement.firstElementChild.textContent;
//add classes
employeename.classList.add("name");
deleteBtn.classList.add('delete');
// append to document
li.appendChild(employeename);
li.appendChild(deleteBtn);
selected.appendChild(li);
console.log(deleteBtn);
}
})
//delete teammate from selected team
selected.addEventListener('click', function(e){
if(e.target.className == 'delete'){
const li = document.createElement('li');
const employeename = document.createElement('span');
const addBtn = document.createElement('span');
//add content
addBtn.textContent = 'delete';
employeename.textContent = e.target.parentElement.firstElementChild.textContent;
//add classes
employeename.classList.add("name");
addBtn.classList.add('add');
// append to document
li.appendChild(employeename);
li.appendChild(addBtn);
team.appendChild(li);
//delete from selected
console.log(addBtn);
}
})
//add a new employee - listen to submit event from form
var addForm = document.forms['add-employee'];
addForm.addEventListener('submit', function(e){
e.preventDefault(); //prevent default behavior
const value = addForm.querySelector('input[type="text"]').value;
console.log(value);
//create elements
const li = document.createElement('li');
const employeename = document.createElement('span');
const deleteBtn = document.createElement('span');
//add content
deleteBtn.textContent = 'delete';
employeename.textContent = value;
//add classes
employeename.classList.add("name");
deleteBtn.classList.add('delete');
// append to document
li.appendChild(employeename);
li.appendChild(deleteBtn);
selected.appendChild(li);
//apply style
})
//filter names
//grab a reference to the form
searchBar.addEventListener('keyup', function(e){
//term the user is searching
const term = e.target.value.toLowerCase();
//names to compare
const names = team.getElementsByTagName('li');
Array.from(names).forEach(function(name){
const fullname = team.firstElementChild.textContent;
//check if name exists
if(fullname.toLowerCase().indexOf(term) != -1){
name.style.display = 'block';
} else {
name.style.display = 'none';
}
})
})
It gives me the following result:
Every time I hit the button, it gives me a duplicate (same for the input Teammate not found)
Moreover, I still can't, once deleted, get back to a "Add to the team"...
I hope you guys can enlighten me, I spent maybe too much time on it, but I cant find out right now...
This is few captions of what it does:
enter image description here
once you clicked on delete in selected list
enter image description here
Thank you
HTML:
<?php
require_once 'core/init.php';
include 'includes/checkedboxes.php';
include 'includes/headerfront.php';
//include_once 'includes/dbh.inc.php';
if(Session::exists('Success')){
echo Session::flash('Success');
}
?>
<html>
<head>
<link rel="stylesheet" href="styleChief.css">
</head>
<body>
<section class="team">
<div id="wrapper">
<div id="container-left">
<div id="search">
<h2 class="title">Who was in your team today?</h1>
<form id="search-employees">
<input type="text" name="search" placeholder="Search a name..">
</form>
</div>
<div id="team-list">
<h3 class="title">Team list</h3>
<p>Select today's teammates</p>
<ul>
<li>
<span class="name">name</span>
<span class="add">Add to the team</span>
</li>
<li>
<span class="name">name 1</span>
<span class="add">Add to the team</span>
</li>
<li>
<span class="name">name 2</span>
<span class="add">Add to the team</span>
</li>
<li>
<span class="name">name 3</span>
<span class="add">Add to the team</span>
</li>
</ul>
</div>
<div id=newmember class="newmember">
<h4>
<a class="not-found" href="#"><img class="img" src="img/not-found.png" width="20" height="20" alt="not-found">
</a>Teammate not found?</h4>
<form id="add-employee">
<h3 class="title">Add a new member:</h3>
<input type="text" placeholder="New teammate name">
<button>Add</button>
</form>
</div>
</div>
<div id="container-right">
<h2>Selected</h2>
<div id="selected-list">
<h3 class="title">You have selected the following teammates for today: </h3>
<ul>
</ul>
</div>
</div>
</div>
</section>
<section class="part">
<h2>Which part(s) have you been working on today?</h2>
<input type="checkbox" name="checklist-part" value="Decoratives"><label>Decoratives</label>
<input type="checkbox" name="checklist-part" value="Windows"><label>Windows</label>
<input type="checkbox" name="checklist-part" value="Signage Gibela"><label>Signage Gibela</label>
<input type="checkbox" name="checklist-part" value="Signage Prasa"><label>Signage Prasa</label>
<input type="checkbox" name="checklist-part" value="Stripes"><label>Stripes</label>
<input type="checkbox" name="checklist-part" value="Other"><label>Other</label><br/>
<input type="submit" name="submit" value="Continue" /><br/>
</form>
</section>
<?php
$sql="SELECT * FROM dttechnames;";
$result=mysqli_query($conn,$sql);
?>
<script src="app/app.js"></script>
<script src="app/app.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
</html>

I tried to fx a few issues with your snippet (e. g. there was a <form> tag missing). Basically, you were working far too hard in your script part. If you want to move a <li> from one <ul> to another then it is easiest to simply .appendChild() it to the target <ul>. Doing so will automatically remove it from its original parent <ul>. As the "move" operation is universal to all team-member-<li>s - whether they are part of the "team" or the "selected" group - we can use a single "click" event-listener for all of them. I added it to the outer #wrapper div.
The following snippet only covers the team member picking part (I removed all other script components for clarity) but it should demonstrate the basic points:
var grps=['#selected','#team'].map(s=>document.querySelector(s+'-list ul')),
btn=['Add to the team','Remove from the team'];
[...grps[1].querySelectorAll('.move')].forEach(sp=>sp.textContent=btn[0])
// move members ...
document.querySelector('#wrapper').addEventListener("click", function(e){
if(e.target.classList.contains('move')){
var i=btn.indexOf(e.target.textContent); // i=0 (Adding) or i=1 (Removing) ?
e.target.textContent=btn[1-i]; // exchange button caption
grps[i].appendChild(e.target.parentNode) // move team member ...
}
})
li {margin: 10px}
.move{
float: right;
background: #9361bf;
padding:4px;
border-radius: 3px;
}
<section class="team">
<div id="wrapper">
<div id="container-left">
<div id="search">
<h2 class="title">Who was in your team today?</h1>
<form id="search-employees">
<input type="text" name="search" placeholder="Search a name..">
</form>
</div>
<div id="team-list">
<h3 class="title">Team list</h3>
<p>Select today's teammates</p>
<ul>
<li>
<span class="name">Roman BARON</span>
<span class="move"></span>
</li>
<li>
<span class="name">Vincent Houdeville</span>
<span class="move"></span>
</li>
<li>
<span class="name">Jayson Abrams</span>
<span class="move"></span>
</li>
<li>
<span class="name">Bafana Hlongwane</span>
<span class="move"></span>
</li>
</ul>
</div>
<div id=newmember class="newmember">
<h4>
<a class="not-found" href="#"><img class="img" src="img/not-found.png" width="20" height="20" alt="not-found">
</a>Teammate not found?</h4>
<form id="add-employee">
<h3 class="title">Add a new member:</h3>
<input type="text" placeholder="New teammate name">
<button>Add</button>
</form>
</div>
</div>
<div id="container-right">
<h2>Selected</h2>
<div id="selected-list">
<h3 class="title">You have selected the following teammates for today: </h3>
<ul>
</ul>
</div>
</div>
</div>
</section>
<section class="part">
<h2>Which part(s) have you been working on today?</h2>
<form id="parts">
<label><input type="checkbox" name="checklist-part" value="Decoratives">Decoratives</label>
<label><input type="checkbox" name="checklist-part" value="Windows">Windows</label>
<label><input type="checkbox" name="checklist-part" value="Signage Gibela">Signage Gibela</label>
<label><input type="checkbox" name="checklist-part" value="Signage Prasa">Signage Prasa</label>
<label><input type="checkbox" name="checklist-part" value="Stripes">Stripes</label>
<label><input type="checkbox" name="checklist-part" value="Other">Other</label><br/>
<input type="submit" name="submit" value="Continue" /><br/>
</form>
</section>
This seems to have been the first question you posted on StackOverflow, so a belated: "Welcome here!"
But I would like to point out that your question was unnecessarily long and complicated. You should try and focus on one point per question. This would make it much more accessible for other Stackoverflow members to answer without having to review large chunks of code first.
And one final remark: You tagged your question with jQuery, but as you haven't used it in your script I also removed the script src="...jquery..."></script> tag from my snippet. I am eternally grateful to John Resig for giving us jQuery but in modern browsers you can now mostly do without it.

After trying cars10m solution, I have few problems..
1. The css style of my "Add to the team" disappeared. I of course changed my code above to:
.add,.delete {
float: right;
background: #9361bf;
padding:6px;
border-radius: 4px;
}
to :
.move{
float: right;
background: #9361bf;
padding:6px;
border-radius: 4px;
}
but doesnt style the class.
Maybe move is a reserved keyword?
Anyways, I have another problem:
2. That solution moves the selected "li", but inside the same <ul>.
When I do a console.log(e.target.textContent) just after if(e.target.classList.contains('move')), i get to see that it contains "Add to the team" and "Remove from the team".
I found out that it was behaving as if I clicked two twice, but I only clicked once.
Why?
Thank you guys for your answers!!

Assigning unique models and ids to checkboxes within ng-repeat

I'm trying to understand data-binding with AngularJs and I'm working on a simple form that uses ng-repeat to render a set of accordions. The headings of each accordion has a status box that is red by default, yet when the accordion is expanded, checking the checkbox within should turn the status box green.
The problem I'm having is that when I check a checkbox, it turns the status box of each accordion heading green; not just the status box relevant to the checkbox.
I know I need to assign a unique model to each status box/checkbox but I'm unsure how. I've seen some examples with $index but I haven't been able to apply it to my problem.
The HTML is as follows:
<ul class="radio-accordion">
<li class="radio-accordion-item" ng-repeat="animal in ctrl.animalTypes">
<input id="input{{$index + 1}}" type="checkbox" name="input" />
<div class="radio-accordion-header grey">
<div class="radio-accordion-header-left">
<div class="radio-accordion-header-title-wrapper">
<span class="status-led {{ctrl.checkedStatus}}"></span>
<h1 class="radio-accordion-header-title text-blue">{{animal.name}}</h1>
</div>
</div>
<div class="radio-accordion-header-right"></div>
<label class="expander-blue" for="input{{$index + 1}}"></label>
</div>
<div class="radio-accordion-body white">
<div class="padd-10 marg-left40">
<div class="toolbar-flex marg-top-10 marg-bott0">
<input class="restyled"
id="input{{$index + 1}}"
name="input"
type="checkbox"
ng-model="ctrl.checkedStatus"
ng-change="ctrl.setConsent()"
ng-true-value="'green'"
ng-false-value="'red'" />
<label class="restyled-label"
for="input{{$index + 1}}"><em>I like this animal</em></label>
</div>
</div>
</div>
</li>
`
Any help appreciated!
EDIT: This is what I did in case it helps anyone in the future!
<ul class="radio-accordion">
<li class="radio-accordion-item" ng-repeat="animal in ctrl.animalTypes" ng-model="animal.checked>
<input id="input{{$index + 1}}" type="checkbox" name="input" />
<div class="radio-accordion-header grey">
<div class="radio-accordion-header-left">
<div class="radio-accordion-header-title-wrapper">
<span ng-class="{'status-led red': animal.checked == false, 'status-led green': animal.checked == true}"></span>
<h1 class="radio-accordion-header-title text-blue">{{animal.name}}</h1>
</div>
</div>
<div class="radio-accordion-header-right"></div>
<label class="expander-blue" for="input{{$index + 1}}"></label>
</div>
<div class="radio-accordion-body white">
<div class="padd-10 marg-left40">
<div class="toolbar-flex marg-top-10 marg-bott0">
<input class="restyled"
id="input{{$index + 1}}"
name="input"
type="checkbox"
ng-model="animal.checked"
ng-change="ctrl.isChecked(animal.checked)" />
<label class="restyled-label"
for="input{{$index + 1}}"><em>I like this animal</em></label>
</div>
</div>
</div>
</li></ul>

If you aren't concerned about adding additional properties to your animal objects , or if there already exists a property in those objects that would be used as checkbox indicator just use:
ng-model="animal.SomeProperty"
An alternate way is to use a separate object and use $index as each key:
ng-model="ctrl.checkedStatus[$index]"

How to find closest checkbox if the two checkbox are in different hierarchy

I have two checkbox in different hierarchy. I want to display a text when either one of the checkbox is checked. Hide text when both are unchecked. Both check box have an onClick function where i am passing "this". How can I find whether second checkbox is checked or not on click of first checkbox.
Note : Id is created dynamically so cannot use that. Below I have mentioned the depth of checkbox (firstCheckbox and SecondCheckbox). What should I write in showMsg(this,Var1) javascript method so that the expectation is met, i.e on click of one of the checkbox, another/closest checkbox is retrieved and its value (checked/unchecked) is available.
<f:subview id="firstsubview">
<f:subview id="secondSubview">
<f:verbatim>
<div id="first" class="firstClass">
</f:verbatim>
<h:selectBooleanCheckbox id="dynamic1" onclick="showMsg(this,'firstcheckbox')" ;/>
<f:verbatim>
</div>
</f:verbatim>
<h:outputText value="XYZ" id="abc" />
<f:verbatim>
<div id="anotherdiv1" class="anotherdiv1" /></div>
<div id="anotherdiv2" class="anotherdiv2" /></div>
</f:verbatim>
</f:subview>
</f:subview>
<f:subview id="thirdsubview">
<f:subview id="fourthSubview">
<f:verbatim>
<div id="second" class="secondclass">
</f:verbatim>
<h:selectBooleanCheckbox id="dynamic2" onclick="showMsg(this,'secondcheckbox')" ; />
<f:verbatim>
</div>
</f:verbatim>
<h:outputText value="def" id="ghi" />
<f:verbatim>
<div id="anotherdiv3" class="anotherdiv3" /></div>
<div id="anotherdiv4" class="anotherdiv4" /></div>
</f:verbatim>
</f:subview>
</f:subview>
<div id="displayDiv"> This should be displayed if
any one checkbox or both are check, hidden when both
checkbox are unchecked</div>
Javascript method :
function showMsg(checkbox, var1){
if(checkbox.checked){
$(".displayDiv").show();
} else {
if(var1 == "firstCheckbox"){
var nearestCheckbox = $(checkbox).siblings();
if(nearestCheckbox .checked){
$(".displayDiv").show();
} else { $(".displayDiv").hide();}
//the above code is not working
}
if(var1 == "secondCheckbox"){
//plz suggest what should i write as none is working
}
}}
Here is Browser generated HTML :
<span id="rfmhiddenouterid"><input name="rfmhidden" class="RFM910400060" value="false" <="" span="" type="hidden">
<div id="first" class="firstClass">
<input checked="checked" id="AGVUQ0C768TCA0IVC9FC5A2007:dynamic" name="AGVUQ0C768TCA0IVC9FC5A2007: dynamic" class="dynamic111557543" onclick="showMsg(this,'firstcheckbox')" type="checkbox"></div>
<span id="AGVUQ0C768TCA0IVC9FC5A2007:dynamic"> First CheckBox </span><br><br>
<div id="anotherdiv1" class="anotherdiv1" style="display: none;">
</div>
<div id="anotherdiv2" class="anotherdiv2" style="display: none;">
</div>
<span id="rfmhiddenouterid2"><input name="rfmhidden" class="RFM910400060" value="false" <="" span="" type="hidden">
<div id="second" class="secondClass">
<input checked="checked" id="AGVUQ0C768TCA0IVC9FC5A2007:dynamic" name="viewns_7_AGVUQ0C768TCA0IVC9FC5A2007:dynamic" class="dynamic111557543" onclick="showMsg(this,'secondcheckbox')" type="checkbox"></div>
<span id="viewns_7_AGVUQ0C768TCA0IVC9FC5A2007: dynamic" ">Second Checkbox</span>
<div id="anotherdiv3" class="anotherdiv3" style="display: none;">
</div>
<div id="anotherdiv4" class="anotherdiv4" style="display: none;">
</div>
<div id="displayDiv"> This should be displayed if
any one checkbox or both are check, hidden when both
checkbox are unchecked</div>
</span>
</span>

Ok, I came up with a working solution https://jsfiddle.net/a72t14j0/
Sadly, I have painfully cleaned your HTML but could not debug your code, here is the JavaScript I came up with:
$( document ).ready(function() {
$(".dynamic111557543").on("click", function(){
// by default, hide the text
$("#displayDiv").hide();
var number_of_selected_checkboxes = $(".dynamic111557543:checked").length;
if(number_of_selected_checkboxes > 0){
// if any checkbox is checked, show the text
$("#displayDiv").show();
}
});
});

Jquery get element attribute and insert it to an input text

I need help for this issue.
I have a list of file and in each one a checkbox input. So i need to check one of that checkboxes and when click on "Insert" button, get the attribute value and insert it to that text input.
I appreciate your help.
here is my html code link:
http://jsfiddle.net/Qd3n5/4/
<div class="download_list">
<div>
<p class="name"> samle-image.gif
</p>
</div>
<div class="size-text">
<input type="checkbox" name="delete" value="1" class="toggle">
</div>
</div>
<div class="download_list">
<div>
<p class="name"> favicon.ico
</p>
</div>
<div class="size-text">
<input type="checkbox" name="delete" value="1" class="toggle">
</div>
</div>
<div class="download_list">
<div>
<p class="name"> freedown.jpg
</p>
</div>
<div class="size-text">
<input type="checkbox" name="delete" value="1" class="toggle">
</div>
</div>
<div class="fileupload">
<button type="button" id="Inser_btn" class="btn btn-primary Inser_btn"> <i class="UpIcon icon-remove"></i>
<span>Insert</span>
</button>
</div>
<div class="test">
<input type="text" name="banners_image_local" value="some-text.png" size="51" maxlength="64">
</div>

You can try this :
$(function(){
$('#Inser_btn').click(function(){
var title='';
$('input[name="delete"]:checked').each(function(){
title+=$(this).closest('.size-text').prev().find('a').attr('title');
});
$('input[name="banners_image_local"]').val(title);
});
});
Demo

Use this piece of Code
$("#Inser_btn").click(function(){
var val = $(".toggle:checked").parent().siblings().eq(0).find("p a").text();
$(".test input").val(val);
});
JSFIDDLE

By doing so:
$(document).ready(function(){
$('#Inser_btn').click(function(){
$('.download_list').each(function(){
var checked = $(this).find('.toggle');
if(checked.is(':checked')){
$('input[name="banners_image_local"]').val($(this).find('a').html());
return false;
}
});
});
});
Here is a demo Fiddle

here is your code , have updated your JSFiddle
used jQuery for doing this click here
$(function(){
$("button").on('click', function(){
var checked = $("input[type='checkbox']:checked");
if(checked.length >0)
{
var value = checked.val();
$("input[name='banners_image_local']").val(value);
}
});
});

I am not sure whether this code works for you. Give it a try. (untested code)
$('#Inser_btn').on('click', function () {
$('input[name="banners_image_local"]').val('');
var ckText = $('input[name="delete"]:checked').val();
var textBox = $('input[name="banners_image_local"]').val();
textBox = textBox + " " + ckText;
$('input[name="banners_image_local"]').val(textBox);
});

If you want to get the checked checkboxes value in the input field this should do with jQuery:
$("#Inser_btn").click(function(){
$("#banners_image_local").val("");
$('input[name="delete"]:checked').each(function() {
$("#banners_image_local").val($("#banners_image_local").val() + ($(this).attr('value')));
});
});
Also set the input text to id="banners_image_local"
Best.

Try this:
$('#Inser_btn').click(function () {
$('input[name=banners_image_local]').val($('.toggle:checked').parent().prev().find('.File_Name').attr('title'));
});
Working Fiddle
Having a class name to input text would be better.