Why is the length of an html collection coming as zero? - javascript

When I am using the length property over the HTML Collection,I am getting zero...Please Correct me someone..
My HTML Code:
<div class="container">
<div class="header">
<h1>To Do List</h1>
</div>
<div class="todos">
<ul class="todolist">
<li class="listItem">
<p>Doing Homework</p>
</li>
<li class="listItem">
<p>Doing Competitve Programming</p>
</li>
<li class="listItem">
<p>Doing Dynamic Programming</p>
</li>
<li class="listItem">
<p>Doing Robot Programming</p>
</li>
<li class="listItem">
<p>Doing DSA</p>
</li>
</ul>
</div>
</div>
</body>
MY JS Code:
function crossAdder() {
var todolist = document.getElementsByClassName('.listItem');
console.log(todolist.length);
}
crossAdder();


Remove . in .listItem when you input to document.getElementsByClassName function.
It accept a class name, not a CSS selector.
function crossAdder() {
var todolist = document.getElementsByClassName('listItem');
console.log(todolist.length);
}
crossAdder();
<div class="container">
<div class="header">
<h1>To Do List</h1>
</div>
<div class="todos">
<ul class="todolist">
<li class="listItem">
<p>Doing Homework</p>
</li>
<li class="listItem">
<p>Doing Competitve Programming</p>
</li>
<li class="listItem">
<p>Doing Dynamic Programming</p>
</li>
<li class="listItem">
<p>Doing Robot Programming</p>
</li>
<li class="listItem">
<p>Doing DSA</p>
</li>
</ul>
</div>
</div>
</body>


function crossAdder(){
//Use query selector if you are using .listItem
var todoList = document.querySelectorAll(".listItem")
//If you are using getElementsByClassName don't use the dot only need just listItem
var todoList = document.getElementsByClassName("listItem")
console.log(todoList)
}

Related

how to make clickable buttons that add text into a div

i want to create a function that adds text into an empty div depending on what button is clicked
i'm making a calculator as one of my beginner javascript projects (i know i can just use inputs and the "button" tag but i feel this'll be more original and challenging). i'm trying to add events to all the elements in the queryselector all nodelist, i feel my function is correct and i've tried all i can but the code doesn't seem to work, any help at all would be appreciated.
i am trying to create a kind of like input div that reflects the value or text of the clicked list item
let digits = document.querySelectorAll("digit");
let add = document.getElementById("camper");
for (let i = 0; i < digits.length; i++) {
digits[i].addEventListener("click", function() {
add.innerHTML += digits[i].innerHTML
});
digits[i].value = [i];
};
<div class="container">
<div class="camper">
<h3 id="insert"></h3>
</div>
<div class="right-box">
<ul>
<li>
<h3 id="equal">=</h3>
</li>
<li>
<h3 id="plus">+</h3>
</li>
<li>
<h3 id="minus">-</h3>
</li>
<li>
<h3 id="multiply">x</h3>
</li>
<li>
<h3 id="divide">\</h3>
</li>
</ul>
</div>
<div class="write-box">
<ul>
<li class="digit">
<h3>1</h3>
</li>
<li class="digit">
<h3>2</h3>
</li>
<li class="digit">
<h3>3</h3>
</li>
<li class="digit">
<h3>4</h3>
</li>
<li class="digit">
<h3>5</h3>
</li>
<li class="digit">
<h3>6</h3>
</li>
<li class="digit">
<h3>7</h3>
</li>
<li class="digit">
<h3>8</h3>
</li>
<li class="digit">
<h3>9</h3>
</li>
<li class="digit">
<h3>0</h3>
</li>
<li>
<h3>clear</h3>
</li>
<li>
<h3>bkspc</h3>
</li>
</ul>
</div>
</div>

Typos
it is id="camper" and not class="camper" if you want to use getElementById but you likely want insert instead of camper
it is querySelectorAll(".digit") - you are missing the dot in the class selector
Logic
use this.innerText to get the content of the digit
let digits = document.querySelectorAll(".digit");
let add = document.getElementById("insert");
for (let i = 0; i < digits.length; i++) {
digits[i].addEventListener("click", function() {
add.innerHTML += this.innerText;
});
};
<div class="container">
<div class="camper">
<h3 id="insert"></h3>
</div>
<div class="right-box">
<ul>
<li>
<h3 id="equal">=</h3>
</li>
<li>
<h3 id="plus">+</h3>
</li>
<li>
<h3 id="minus">-</h3>
</li>
<li>
<h3 id="multiply">x</h3>
</li>
<li>
<h3 id="divide">\</h3>
</li>
</ul>
</div>
<div class="write-box">
<ul>
<li class="digit">
<h3>1</h3>
</li>
<li class="digit">
<h3>2</h3>
</li>
<li class="digit">
<h3>3</h3>
</li>
<li class="digit">
<h3>4</h3>
</li>
<li class="digit">
<h3>5</h3>
</li>
<li class="digit">
<h3>6</h3>
</li>
<li class="digit">
<h3>7</h3>
</li>
<li class="digit">
<h3>8</h3>
</li>
<li class="digit">
<h3>9</h3>
</li>
<li class="digit">
<h3>0</h3>
</li>
<li>
<h3>clear</h3>
</li>
<li>
<h3>bkspc</h3>
</li>
</ul>
</div>
</div>
Here is a more elegant way - if you are doing homework, you might want to do more coding before looking :)
let add = document.getElementById("insert");
document.getElementById("container").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.tagName==="H3") {
const text = tgt.innerText;
const cn = tgt.parentNode.className;
if (cn === "digit" || cn === "oper") add.innerText += text;
else if (cn==="action") {
if (text === "clear") {
add.innerText = "";
}
else if (text === "bkspc") {
add.innerText = add.innerText.slice(0,-1);
}
}
}
})
<div id="container">
<div class="camper">
<h2 id="insert"></h2>
</div>
<div class="right-box">
<ul>
<li class="oper">
<h3 id="equal">=</h3>
</li>
<li class="oper">
<h3 id="plus">+</h3>
</li>
<li class="oper">
<h3 id="minus">-</h3>
</li>
<li class="oper">
<h3 id="multiply">x</h3>
</li>
<li class="oper">
<h3 id="divide">\</h3>
</li>
</ul>
</div>
<div class="write-box">
<ul>
<li class="digit">
<h3>1</h3>
</li>
<li class="digit">
<h3>2</h3>
</li>
<li class="digit">
<h3>3</h3>
</li>
<li class="digit">
<h3>4</h3>
</li>
<li class="digit">
<h3>5</h3>
</li>
<li class="digit">
<h3>6</h3>
</li>
<li class="digit">
<h3>7</h3>
</li>
<li class="digit">
<h3>8</h3>
</li>
<li class="digit">
<h3>9</h3>
</li>
<li class="digit">
<h3>0</h3>
</li>
<li class="action">
<h3>clear</h3>
</li>
<li class="action">
<h3>bkspc</h3>
</li>
</ul>
</div>
</div>

You are losing the scope of digits inside the event listener. You need to bind digits to be the scope of this in the event listener like so:
let digits = document.querySelectorAll("digit");
let add = document.getElementById("camper");
for (let i = 0; i < digits.length; i++) {
digits[i].addEventListener("click", function() {
add.innerHTML += this.innerHTML
}).bind(digits[i]);
digits[i].value = [i];
};

Unexpected behavior of $parent.$index in AngularJS

I have a code like this :
<script type="text/ng-template" id="something.html">
<div>
Hey!
</div>
</script>
<div ng-repeat="colum in columns">
<ul>
<li ng-repeat="list in column" id="{{$parent.$index}}" ng-include="something.html">
</li>
</ul>
</div>
The ids are assigned as 1, 2, 3, 4 on the li elements. I am expecting that if columns has 4 elements then the ids for li inside a ul element should be 0,0,0,0.
Rendered DOM is something like :
<div>
<ul>
<li id="0">
</li>
<li id="1">
</li>
</ul>
</div>
<div>
<ul>
<li id="0">
</li>
<li id="1">
</li>
</ul>
</div>
My expected DOM :
<div>
<ul>
<li id="0">
</li>
<li id="0">
</li>
</ul>
</div>
<div>
<ul>
<li id="1">
</li>
<li id="1">
</li>
</ul>
</div>
Apologies if I missed something obvious.

Show Contents of Drop Down

I have code that when clicked expands a drop down to show a set of links. There are three different drop downs each with a different set of links that show when a user clicks.
The script is below, but it is not dynamic. What is a better and more efficient way to write the script, so I do not need to add to it when additional drop downs are needed?
$(".button-nav1").click(function() {
$(".row1").toggle();
});
$(".button-nav2").click(function() {
$(".row2").toggle();
});
$(".button-nav3").click(function() {
$(".row3").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="row1" class="button-nav1">Joe<span class="crt"> ▼</span>
</div>
<div class="row1 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training</strong>
</li>
<ul class="resetTWO">
<li>Lorem Lipsum
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li>Lipsum
</li>
<li>Loremu
</li>
<li>Lipsum
</li>
</ul>
</ul>
</div>
</div>
<div id="row2" class="button-nav2">Joe<span class="crt"> ▼</span>
</div>
<div class="row2 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training and Help</strong>
</li>
<ul class="resetTWO">
<li>Lorem Lipsum
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li>Lipsum
</li>
<li>Loremu
</li>
<li>Lipsum
</li>
</ul>
</ul>
</div>
</div>
<div id="row3" class="button-nav3">Joe<span class="crt"> ▼</span>
</div>
<div class="row3 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training</strong>
</li>
<ul class="resetTWO">
<li>Lorem Lipsum
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li>Lipsum
</li>
<li>Loremu
</li>
<li>Lipsum
</li>
</ul>
</ul>
</div>
</div>

You can reduce your jquery to one function. First listen to divs that have a class that starts with button-nav with the $("div[class^=button-nav]") query. Then get the id and toggle any class with that id with $("."+$(this).attr('id')).toggle();
$("div[class^=button-nav]").on('click',function() {
$("."+$(this).attr('id')).toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="row1" class="button-nav1">Joe<span class="crt"> ▼</span>
</div>
<div class="row1 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training</strong>
</li>
<ul class="resetTWO">
<li>Lorem Lipsum
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li>Lipsum
</li>
<li>Loremu
</li>
<li>Lipsum
</li>
</ul>
</ul>
</div>
</div>
<div id="row2" class="button-nav2">Joe<span class="crt"> ▼</span>
</div>
<div class="row2 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training and Help</strong>
</li>
<ul class="resetTWO">
<li>Lorem Lipsum
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li>Lipsum
</li>
<li>Loremu
</li>
<li>Lipsum
</li>
</ul>
</ul>
</div>
</div>
<div id="row3" class="button-nav3">Joe<span class="crt"> ▼</span>
</div>
<div class="row3 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training</strong>
</li>
<ul class="resetTWO">
<li>Lorem Lipsum
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li>Lipsum
</li>
<li>Loremu
</li>
<li>Lipsum
</li>
</ul>
</ul>
</div>
</div>

From the code provided I assume .row1 is a typo. I hope you mean #row1. If so the code is reduced to
$('.button-nav1,.button-nav2,.button-nav3').click(function(){
$(this).toggle();
}
To combine all three function in one you can add common class to all .button-nav1, .button-nav2 and .button-nav3 (say button-nav) and change the function to
$(document).on('click', '.button-nav', function(){
$(this).toggle();
}

How to remove li tag by data attribute using jquery

I want to remove li tag by data attribute.
I want to remove 1st ul of child li which has class name like second Base when click.
My code looks like as below
<div class="box-ul">
<ul data-id="Base" class="left">
<li>Base</li>
<li class="second Base">
<span data-addedname="SignatureBread" class="close-btn">Signature Bread</span>
<span data-addedname="Lettuce" class="close-btn">Lettuce</span>
</li>
</ul>
<ul data-id="Core Filling" class="left">
<li>Core Filling</li>
<li class="second CoreFilling">
<span data-addedname="Steak" class="close-btn">Steak</span>
<span data-addedname="CrispyChecken" class="close-btn">Crispy Checken</span>
</li>
</ul>
<ul data-id="Spreads & Cheeses" class="left">
<li>Spreads & Cheeses</li>
<li class="second SpreadsCheeses"><span data-addedname="HomemadeHommos(Spread)" class="close-btn">Homemade Hommos (Spread)</span>
<span data-addedname="ZaatarWithOliveOil(Spread)" class="close-btn">Zaatar With Olive Oil (Spread)</span>
</li>
</ul>
<ul data-id="Classic Ingredients" class="left">
<li>Classic Ingredients</li>
<li class="second ClassicIngredients"><span data-addedname="Lettuce" class="close-btn">Lettuce</span><span data-addedname="Tomato" class="close-btn">Tomato</span><span data-addedname="Cucumber" class="close-btn">Cucumber</span>
<span data-addedname="Pickles" class="close-btn">Pickles
</span>
</li>
</ul>
<ul data-id="Premium Ingredients" class="left">
<li>Premium Ingredients</li>
<li class="second PremiumIngredients">
<span data-addedname="SundriedTomato" class="close-btn">Sundried Tomato</span>
</li>
</ul>
<ul data-id="Sauces" class="left">
<li>Sauces</li>
<li class="second Sauces">
<span data-addedname="Ketchup*(Classic)" class="close-btn">Ketchup* (Classic)</span>
<span data-addedname="Mayo(Classic)" class="close-btn">Mayo (Classic)</span>
</li>
</ul>
</div>
I want to like this output. Here remove li of first ul.
<div class="box-ul">
<ul data-id="Base" class="left">
<li>Base</li>
</ul>
<ul data-id="Core Filling" class="left">
<li>Core Filling</li>
<li class="second CoreFilling">
<span data-addedname="Steak" class="close-btn">Steak</span>
<span data-addedname="CrispyChecken" class="close-btn">Crispy Checken</span>
</li>
</ul>
<ul data-id="Spreads & Cheeses" class="left">
<li>Spreads & Cheeses</li>
<li class="second SpreadsCheeses">
<span data-addedname="HomemadeHommos(Spread)" class="close-btn">Homemade Hommos (Spread)</span>
<span data-addedname="ZaatarWithOliveOil(Spread)" class="close-btn">Zaatar With Olive Oil (Spread)</span>
</li>
</ul>
<ul data-id="Classic Ingredients" class="left">
<li>Classic Ingredients</li>
<li class="second ClassicIngredients">
<span data-addedname="Lettuce" class="close-btn">Lettuce</span><span data-addedname="Tomato" class="close-btn">Tomato</span>
<span data-addedname="Cucumber" class="close-btn">Cucumber</span>
<span data-addedname="Pickles" class="close-btn">Pickles
</span>
</li>
</ul>
<ul data-id="Premium Ingredients" class="left">
<li>Premium Ingredients</li>
<li class="second PremiumIngredients">
<span data-addedname="SundriedTomato" class="close-btn">Sundried Tomato</span>
</li>
</ul>
<ul data-id="Sauces" class="left">
<li>Sauces</li>
<li class="second Sauces"><span data-addedname="Ketchup*(Classic)" class="close-btn">Ketchup* (Classic)</span><span data-addedname="Mayo(Classic)" class="close-btn">Mayo (Classic)</span>
</li>
</ul>
</div>

https://jsfiddle.net/926vogLk/
$('li.second.Base').click(function() {
$(this).remove();
});
or
if you want to remove first li of ul
$('li.second.Base').click(function() {
$(this).prev().remove();
});

If you want to remove only first ul then try #Akhsay mentioned solution. Or if you want to remove any ul with specific class or data attribute then do this.
$("ul[data-id=Base]").find("li.base").remove()
Or
$("li.Base").remove()

I am not sure if I hunderstood right but:
$("li.second.Base").parent().remove()
might help you

$('.second').on('click',function(){
$(this).fadeOut(300,function(){$(this).remove() });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-ul">
<ul data-id="Base" class="left">
<li>Base</li>
<li class="second Base"><span data-addedname="SignatureBread" class="close-btn">Signature Bread</span><span data-addedname="Lettuce" class="close-btn">Lettuce</span></li>
</ul>
<ul data-id="Core Filling" class="left">
<li>Core Filling</li>
<li class="second CoreFilling"><span data-addedname="Steak" class="close-btn">Steak</span><span data-addedname="CrispyChecken" class="close-btn">Crispy Checken</span></li>
</ul>
<ul data-id="Spreads & Cheeses" class="left">
<li>Spreads & Cheeses</li>
<li class="second SpreadsCheeses"><span data-addedname="HomemadeHommos(Spread)" class="close-btn">Homemade Hommos (Spread)</span><span data-addedname="ZaatarWithOliveOil(Spread)" class="close-btn">Zaatar With Olive Oil (Spread)</span></li>
</ul>
<ul data-id="Classic Ingredients" class="left">
<li>Classic Ingredients</li>
<li class="second ClassicIngredients"><span data-addedname="Lettuce" class="close-btn">Lettuce</span><span data-addedname="Tomato" class="close-btn">Tomato</span><span data-addedname="Cucumber" class="close-btn">Cucumber</span><span data-addedname="Pickles" class="close-btn">Pickles</span></li>
</ul>
<ul data-id="Premium Ingredients" class="left">
<li>Premium Ingredients</li>
<li class="second PremiumIngredients"><span data-addedname="SundriedTomato" class="close-btn">Sundried Tomato</span></li>
</ul>
<ul data-id="Sauces" class="left">
<li>Sauces</li>
<li class="second Sauces"><span data-addedname="Ketchup*(Classic)" class="close-btn">Ketchup* (Classic)</span><span data-addedname="Mayo(Classic)" class="close-btn">Mayo (Classic)</span></li>
</ul>
</div>

$(function() {
$('body').on('click', function() {
$('.box-ul').find('ul').find('li.Base:first').remove();
});
});

How to set alternating color to nested and sibling divs with certain class.

I have a nested list, each list item has a container div with class R
I am trying to apply alternating colors to alternate divs. The problem is that divs with class are not always siblings.
This is my html:
<ul>
<li>
<div class="R">Bat</div>
<div class="R">description</div>
</li>
<li>
<div class="R">Cat</div>
</li>
<li>
<div class="R">Rat</div>
<ul>
<li>
<div class="R">one
<div class="R">blah</div>
<div class="R">blah blah</div>
</div>
</li>
<li>
<div class="R">two
<div>
</li>
<li>three</li>
</ul>
</li>
</ul>
This is how I want it to look(I have harcoded colors with inline css)
<ul>
<li>
<div class="R" style="background-color:red;">Bat</div>
<div class="R" style="background-color:green;">description</div>
</li>
<li>
<div class="R" style="background-color:red;">Cat</div>
</li>
<li>
<div class="R" style="background-color:green;">Rat</div>
<ul>
<li>
<div class="R" style="background-color:red;">one
<div class="R" style="background-color:green;">blah</div>
<div class="R" style="background-color:red;">blah blah</div>
</div>
</li>
<li>
<div class="R" style="background-color:green;">two
<div>
</li>
</ul>
</li>
</ul>

Try this : you can use :odd and :even jQuery selectors to get odd and even divs and apply background color accordingly. See below code
$(function() {
$('ul div.R:odd').addClass('oddColor');
$('ul div.R:even').addClass('evenColor');
});
.oddColor {
background-color: red;
}
.evenColor {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li>
<div class="R">Bat</div>
<div class="R">description</div>
</li>
<li>
<div class="R">Cat</div>
</li>
<li>
<div class="R">Rat</div>
<ul>
<li>
<div class="R">one
<div class="R">blah</div>
<div class="R">blah blah</div>
</div>
</li>
<li>
<div class="R">two
<div>
</li>
<li>three</li>
</ul>
</li>
</ul>

$(document).ready(function() {
$(".R:even").css("background-color", "green");
$(".R:odd").css("background-color", "red");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
<div class="R">Bat</div>
<div class="R">description</div>
</li>
<li>
<div class="R">Cat</div>
</li>
<li>
<div class="R">Rat</div>
<ul>
<li>
<div class="R">one
<div class="R">blah</div>
<div class="R">blah blah</div>
</div>
</li>
<li>
<div class="R">two</div>
</li>
<li>Three</li>
</ul>
</li>
</ul>
$(function() {
$('ul div.R:odd').addClass('oddRow');
$('ul div.R:even').addClass('evenRow');
});
.oddRow {
background-color: red;
}
.evenRow {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
<div class="R">Bat</div>
<div class="R">description</div>
</li>
<li>
<div class="R">Cat</div>
</li>
<li>
<div class="R">Rat</div>
<ul>
<li>
<div class="R">one
<div class="R">blah</div>
<div class="R">blah blah</div>
</div>
</li>
<li>
<div class="R">two</div>
</li>
<li>Three</li>
</ul>
</li>
</ul>

$('div.R').each(function(index) {
$(this).css('background-color', index % 2 === 0 ? '#cc0' : '#0cc');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li>
<div class="R">Bat</div>
<div class="R">description</div>
</li>
<li>
<div class="R">Cat</div>
</li>
<li>
<div class="R">Rat</div>
<ul>
<li>
<div class="R">one
<div class="R">blah</div>
<div class="R">blah blah</div>
</div>
</li>
<li>
<div class="R">two</div>
</li>
<li>three</li>
</ul>
</li>
</ul>

Categories

Resources