Why do all divs have the same name? - javascript

I want to delete after clicking the product button, but it does not work properly I do not know why. It does not remove the correct object from the table
document.addEventListener('click', function(e) {
if (e.target.id === 'removeItem') {
var divWithItem = document.getElementsByClassName('containerBasket__allProducts__product');
// Pobieram name itemu
var nameItem = e.target.parentElement.parentElement.getAttribute('name');
var thisItemDiv = e.target.parentElement.parentElement;
var thisItem = JSON.parse(products[nameItem]);
products.splice(thisItem, 1);
localStorage.setItem('product', JSON.stringify(products));
thisItemDiv.remove();
for (var i = 0; i < products.length; i++) {
for (var j = 0; j < divWithItem.length; j++) {
divWithItem[j].setAttribute('name', [j]);
}
}
console.log(products);
}
});
Before looping
After looping
Why does a div with the same name?

Related

JS: Change row background color on specific column value

I am working on this table that as to be managed by the client. I want to know if is possible to change the color of the entire row when in the "Status" column he writes the word "vermietet".
In this case when the client write "vermietet" the rows that contains that word change background color in orange.
Any JS tips?
Thanks in adivce.
EDIT:
I tried this
<script>
jQuery(document).ready(function($){
$(document.body)var cols = document.getElementsByClassName('column-10');
for (var i = 0; i < cols.length; ++i) {
var col = cols[i];
if (col.innerHTML === 'vermietet') {
var parent = col;
while((parent = parent.parentElement).tagName !== 'TR');
var found = parent.childNodes;
for (var j = 0; j < found.length; ++j) {
var td = found[j];
if (td.tagName === 'TD') {
td.style.backgroundColor = 'orange';
}
}
}
}
});
</script>
Pure JS solution:
var cols = document.getElementsByClassName('column-10');
for (var i = 0; i < cols.length; ++i) {
var col = cols[i];
if (col.innerHTML === 'vermietet') {
var parent = col;
while((parent = parent.parentElement).tagName !== 'TR');
var found = parent.childNodes;
for (var j = 0; j < found.length; ++j) {
var td = found[j];
if (td.tagName === 'TD') {
td.style.backgroundColor = 'orange';
}
}
}
}

Number of checked checkboxes

How to rewrite this code from jQuery to vanilla JavaScript? I need to see how many checkboxes are checked. The problem is I do not know how to remove unchecked checkboxes from the total score.
$(function () {
var countChecked = function () {
var n = $("input:checked").length;
$(".output").text(n);
};
countChecked();
$("input[type=checkbox]").on("click", countChecked);
});
What should I do next?
var box = document.querySelectorAll('form input');
var par = document.querySelector('.output');
var great = 0;
for (var i = 0; i < box.length; i++) {
box[i].addEventListener('click', countIt);
function countIt() {
for (var i = 0; i < box.length; i++) {
if ( box[i].checked ) {
great++
par.innerHTML = great;
return
}
}
}
}
You need to reset the great variable each time you count (for example by moving it inside the countIt function).
var box = document.querySelectorAll('form input');
var par = document.querySelector('.output');
function countIt() {
var great = 0;
for (var i = 0; i < box.length; i++) {
if (box[i].checked) {
great++;
}
}
par.innerHTML = great;
}
for (var i = 0; i < box.length; i++) {
box[i].addEventListener('click', countIt);
}
You can also move the countIt function definition out of the loop and the same with innerHTML setting.

How do i convert a Jquery code to Pure javascript

I am using Bootstrap.
I am not able to figure out how to put this in pure javascript.This will open a div when we click on the accordion.
$(function() {
$("#panelTicketsList .list-group-item").on("click", function() {
$("#panelTicketsList .list-group-item").removeClass('selected');
$(this).addClass('selected');
if ($('#panelTicketsList').hasClass('col-md-12')) {
$('#panelTicketsList').removeClass('col-md-12').addClass('col-md-3');
$('.panelTicketDetail').removeClass('hide');
}
});
});
jsFiddle : https://jsfiddle.net/tqdc6yyL/
var listGroupItems = document.getElementsByClassName('list-group-item');
for (j = 0; j < listGroupItems.length; j++) {
listGroupItems[j].addEventListener("click", function () {
var elements = listGroupItems;
for (i = 0; i < elements.length; i++) {
if (elements[i].className.indexOf("col-md-12") > -1) {
elements[i].className = elements[i].className.replace("col-md-12", "col-md-3");
elements[i].className = elements[i].className.replace("hide", "");
}
}
this.className = this.className + " selected";
});
}
var list = document.getElementById('panelTicketsList');
var items = document.querySelectorAll("#panelTicketsList .list-group-item");
var detail = document.querySelectorAll(".panelTicketDetail");
items.forEach(function(btn){
btn.addEventListener("click", function(){
items.forEach(function(item){ item.classList.remove("selected"); });
this.classList.add("selected");
if(list.classList.contains('col-md-12')) {
list.classList.remove('col-md-12');
list.classList.add('col-md-3');
detail.classList.add("hide");
}
});
If you have to support older browsers like IE8 or IE9, you can't use JS features like forEach or classList. Instead you should use for loop and className.
//Save DOM query in variable for reuse
var panelTicketsList = document.getElementById('panelTicketsList');
var panelTicketsDetails = document.getElementsByClassName('panelTicketDetail');
var listGroupItems = panelTicketsList.getElementsByClassName('list-group-item');
//go through all of the listGroupItems and set click listener
for (var i = 0; i < listGroupItems.length - 1; i++) {
listGroupItems[i].addEventListener("click", function() {
//On click, go through all of listGroupItems and remove selected class
for (var j = 0; j < listGroupItems.length - 1; j++) {
listGroupItems[j].className = listGroupItems[j].className.replace('selected', '');
}
//Add selected class for clicked element
listGroupItems[i].className += 'selected';
//test if main element has class col-md-12
if (panelTicketsList.className.indexOf("col-md-12") > -1) {
//replace clas col-md-12 with col-md-3
panelTicketsList.className = panelTicketsList.className.replace('col-md-12', 'col-md-3');
//go through all of the panelTicketDetails and remove hide class
for (var k = 0; k < panelTicketsDetails.length - 1; k++) {
panelTicketsDetails[k].className = panelTicketsDetails[k].className.replace('hide', '');
}
}
});
}

move class between elements with pure JavaScript without using jQuery

Can you help me here with this ordinary js code as I want to move the className "active" from item to another item including removing all elements class and keep it with the this.item
function moveClass(){
var item = document.getElementsByClassName('item');
for(var i = 0 ; i < item.length ; i++){
var items = item[i];
items.onclick=function(){
items.classList.remove('active');
this.classList.add('active');
}
}
}
window.addEventListener('load',moveClass)
You can use document.querySelector('.item.active') to find the current active item, and remove .active from it. Afterwards, just assign active to the clicked item (fiddle):
function moveClass() {
var items = document.getElementsByClassName('item');
for (var i = 0; i < items.length; i++) {
items[i].onclick = function () {
var prevActive = document.querySelector('.item.active');
prevActive !== null && prevActive.classList.remove('active');
this.classList.add('active');
}
}
}
document.addEventListener('DOMContentLoaded', moveClass);
Loop through each item and remove the active class from it. Then add active to this (the item being clicked)
function moveClass(){
var items = document.getElementsByClassName('item');
for(var i = 0 ; i < items.length ; i++){
items[i].onclick=function(){
for (var j = 0; j < items.length; j++) {
items[j].classList.remove('active');
}
this.classList.add('active');
}
}
}
window.addEventListener('load',moveClass)
http://jsfiddle.net/zutqwdf8/

How to ignore an event in javascript?

So, I'm new to javascript.
My code is the following, it is based on a xaml file with a canvas and a couple of borders in it:
var defaultPage = null;
var aantalKliks;
var correcteBorders;
var incorrecteBorders;
var geenAntwBorders;
function onLoaded() {
defaultPage = document.getElementById('DefaultPage');
alert('In onloaded van Default.xaml.');
aantalKliks = 0;
aantalBorderKliks = 0;
correcteBorders = new Array();
for (var i = 0; i < 3; i++) {
correcteBorders[i] = defaultPage.content.findName('CorrecteBorder' + i);
}
incorrecteBorders = new Array();
for (var i = 0; i < 3; i++) {
incorrecteBorders[i] = defaultPage.content.findName('IncorrecteBorder' + i);
}
geenAntwBorders = new Array();
for (var i = 0; i < 3; i++) {
geenAntwBorders[i] = defaultPage.content.findName('GeenAntwBorder' + i);
}
}
function OnCanvasClicked() {
if (aantalKliks == 2) {
aantalKliks = 0;
}
if (aantalKliks == 0) {
for (var i = 0; i < correcteBorders.length; i++) {
correcteBorders[i].Visibility = 'Visible';
}
for (var i = 0; i < incorrecteBorders.length; i++) {
incorrecteBorders[i].Visibility = 'Visible';
}
for (var i = 0; i < geenAntwBorders.length; i++) {
geenAntwBorders[i].Visibility = 'Visible';
}
} else if (aantalKliks == 1) {
for (var i = 0; i < correcteBorders.length; i++) {
correcteBorders[i].Visibility = 'Collapsed';
}
for (var i = 0; i < incorrecteBorders.length; i++) {
incorrecteBorders[i].Visibility = 'Collapsed';
}
for (var i = 0; i < geenAntwBorders.length; i++) {
geenAntwBorders[i].Visibility = 'Collapsed';
}
aantalKliks++;
}
function borderClicked(sender) {
for (var i = 0; i < correcteBorders.length; i++) {
correcteBorders[i].Visibility = 'Collapsed';
}
for (var i = 0; i < incorrecteBorders.length; i++) {
incorrecteBorders[i].Visibility = 'Collapsed';
}
for (var i = 0; i < geenAntwBorders.length; i++) {
geenAntwBorders[i].Visibility = 'Collapsed';
}
sender['Visibility'] = 'Visible';
}
The function OnCanvasClicked is triggered when I click anywhere in the canvas and makes all borders disappear/reappear. The function borderClicked is triggered when I click a specific border. The function borderClicked does trigger when I click a specific border, however the OnCanvasClicked function also gets executed right after, which causes an unwanted result.I think I need some way to ignore the OnCanvasClicked function if I click on a border, I did google this but to be honest I didn't really understand what they meant in most of the solutions, so I was hoping someone could explain it to me in a simple way what I need to do (and what I'm doing).
You need to set event.stopPropagation() when borderClicked function is fire
Try this which will prevent Javascript to further execution
event.preventDefault()
#Harshit is correct
You need to set event.stopPropagation() when borderClicked function is fire
I just wanted to add this link/sample which I found very usefull to understand bubbling
http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/ie9_event_phases.htm

Categories