Three js loops just in one - javascript

Hey i just wanted to do one loop which has in three buttons and three drop down lists. But I must created three list because when I connect them connect also drop down lists. My three loops looks like:
var arrow = document.getElementsByClassName('list_arrow');
var list = document.getElementsByClassName('list_panel');
for (var i = 0; i < arrow.length; i++) {
arrow[0].addEventListener('click', function() {
for (var i = 0; i < list.length; i++) {
list[0].classList.toggle('list_panel_open');
}
});
}
for (var i = 0; i < arrow.length; i++) {
arrow[2].addEventListener('click', function() {
for (var i = 0; i < list.length; i++) {
list[2].classList.toggle('list_panel_open');
}
});
}
for (var i = 0; i < arrow.length; i++) {
arrow[1].addEventListener('click', function() {
for (var i = 0; i < list.length; i++) {
list[1].classList.toggle('list_panel_open');
}
});
}
And how can I write this just in one loop?

You don't need the loop within the loops either:
for (var i = 0; i < arrow.length; i++) {
arrow[i].addEventListener('click', function() {
list[i].classList.toggle('list_panel_open');
// since all of the `i` numbers are the same
});
}

You should not combine 2 sets of queried elements like that. You are not guaranteed that the index in the array is the same everywhere. Instead set a attribute on the button(data-id). In the onClickElement handler I get the data-id and use it to toggle the target element.
var q = document.querySelectorAll.bind(document);
function toggleElement(id){
q("#" + id)[0].classList.toggle('hidden');
}
function onClickElement(){
var toggleId = this.getAttribute('data-id');
toggleElement(toggleId);
}
q('.arrow').forEach(function(element){
element.addEventListener('click', onClickElement);
});
.hidden{
display: none;
}
<button class="arrow" data-id="p1">1</button>
<button class="arrow" data-id="p2">2</button>
<button class="arrow" data-id="p3">3</button>
<br>
<br>
<div id="p1" class="panel hidden">Panel 1</div>
<div id="p2" class="panel hidden">Panel 2</div>
<div id="p3" class="panel hidden">Panel 3</div>

Related

how to remove class of a specific element inside an element

function myfunction() {
let items = document.querySelectorAll("#ol li"),
array = [];
for (var i = 0; i < items.length; i++) {
array.push(items[i].innerHTML);
}
for (var i = 0; i < items.length; i++) {
items[i].onclick = function() {
document.getElementById("content").innerHTML = this.innerHTML;
}
};
}
<ol id="ol">
<li class="li">
<span class="x">hello</span>
<span class="xx">testing</span>
</li>
<li class="li">
<span class="x">hello2</span>
<span class="xx">testing2</span>
</li>
<li class="li">
<span class="x">hello3</span>
<span class="xx">testing4</span>
</li </ol>
<div id="content"></div>
<button onclick="myfunction()">click</button>
When I click on one of the lists, the code will put the innerHTML of the list that I clicked into a div, but I also want to remove the class of the spans in the list that is inside the div
How can I do this?
ive tried this but it doesnt work
function myfunction() {
let items = document.querySelectorAll("#ol li"),
array = [];
for (var i = 0; i < items.length; i++) {
array.push(items[i].innerHTML);
}
for (var i = 0; i < items.length; i++) {
items[i].onclick = function() {
document.getElementById("content").innerHTML = this.innerHTML;
const spanInsideDiv = document.querySelector("#content .li .x")
for (var i = 0; i < spanInsideDiv.length; i++) {
spanInsideDiv[i].classList.remove('li');
}
};
}
At the moment your simply copying all the innerHTML to the target <div>. After this happened we can get a HTMLCollection - more or less an array - of all the <span> elements inside using:
document.getElementById("content").getElementsByTagName("span");
Now we can simply loop over the collection and remove all the css classes by calling removeAttribute("class") on each one. This will remove any css class while keeping your original spans intact.
Here's an example:
function myfunction() {
let items = document.querySelectorAll("#ol li"),
array = [];
for (var i = 0; i < items.length; i++) {
array.push(items[i].innerHTML);
}
for (var i = 0; i < items.length; i++) {
items[i].onclick = function() {
document.getElementById("content").innerHTML = this.innerHTML;
let span = document.getElementById("content").getElementsByTagName("span");
for (var a = 0; a < span.length; a++) {
span[a].removeAttribute("class");
}
}
};
}
<ol id="ol">
<li class="li">
<span class="x">hello</span>
<span class="xx">testing</span>
</li>
<li class="li">
<span class="x">hello2</span>
<span class="xx">testing2</span>
</li>
<li class="li">
<span class="x">hello3</span>
<span class="xx">testing4</span>
</li>
</ol>
<div id="content"></div>
<button onclick="myfunction()">click</button>

Javascript click event in for loop not working?

function albumCoverDisplay() {
var i = 0;
for (i = 0; i < albumCover.length; i++) {
albumCover[i].addEventListener("click", function() {
for (var i = 0; i < albumCover.length; i++) {
albumInfo[i].style.display = "none";
}
albumInfo[i].style.display = "block";
});
}
}
Looks like you want to be able to hide other albumCover elements on clicking one of them.
There are a couple of mistakes
Your inner for-loop re-localize the scope of i, use different variable
i's value (assuming another variable is used in inner for-loop) will not remain same when the click will happen.
Make it
function albumCoverDisplay()
{
for (let i = 0; i < albumCover.length; i++) //use let instead of var
{
albumCover[i].addEventListener("click", function() {
for (var j = 0; j < albumCover.length; j++)
{
albumInfo[j].style.display = "none";
}
albumInfo[i].style.display = "block";
});
}
}

Toggle multiple css classes on div with javascript

I have a problem to toggle between 4 color classes.
I trying to change color everytime this function is used.
function changeBackground() {
var all = getSelected();
var blue = document.getElementsByClassName("blue");
for (var i = 0; i < all.length; i++) {
all[i].classList.add("green");
all[i].classList.remove("blue");
}
var red = document.getElementsByClassName("red");
for (var i = 0; i < red.length; i++) {
all[i].classList.add("blue");
all[i].classList.remove("red");
}
var yellow = document.getElementsByClassName("yellow");
for (var i = 0; i < yellow.length; i++) {
all[i].classList.add("red");
all[i].classList.remove("yellow");
}
for (var i = 0; i < all.length; i++) {
all[i].classList.add("yellow");
all[i].classList.remove("green");
}
}
getSelected returns document.getElementsByClassName("selected");
and make sure only divs who are selected do change background.
Html looks like this: <div id="box1" class="box center green size200"></div>
Works well untill it comes to blue->green and the classes won't be removed.
How do i solve this?
Please check this https://jsfiddle.net/maflorezp/1u3xjxaq/1/
You have some errors walking the elements and you need validate class before change
function changeBackground() {
var all = getSelected();
for (var i = 0; i < all.length; i++) {
var color = all[i].classList;
if(color.contains("blue")){
all[i].classList.add("green");
all[i].classList.remove("blue");
} else if(color.contains("red")){
all[i].classList.add("blue");
all[i].classList.remove("red");
} else if(color.contains("yellow")){
all[i].classList.add("red");
all[i].classList.remove("yellow");
} else if(color.contains("green")){
all[i].classList.add("yellow");
all[i].classList.remove("green");
}
}
}
I see a few issues with your code:
1- You loop on all of the boxes for each color. You should replace
for (var i = 0; i < blue.length; i++) {
all[i].classList.add("green");
all[i].classList.remove("blue");
}
by
for (var i = 0; i < blue.length; i++) {
blue[i].classList.add("green");
blue[i].classList.remove("blue");
}
2- You should select all your divs before making any modification, to make sure you only select the one that were that color before starting the function.
var blue = document.getElementsByClassName("blue");
var red = document.getElementsByClassName("red");
var yellow = document.getElementsByClassName("yellow");
var green = document.getElementsByClassName("green");
3- You currently use getSelected to get all the selected divs but then you run the code on every element of the document.
I think instead of using 4 loops, you should only create one and check the class for each elemnts of all, it would resolve a lot of you issues. Something like:
function changeBackground() {
var all = getSelected();
for (var i = 0; i < all.length; i++) {
var colorBlue = all[i].classList.contains("blue")
var colorRed = all[i].classList.contains("red")
var colorGreen = all[i].classList.contains("greed")
var colorYellow = all[i].classList.contains("yellow")
if(colorBlue){
all[i].classList.add("green");
all[i].classList.remove("blue");
}
//check other colors here the same way
}
}

Javascript OOP get Children with getElementsByClassName method

I have a problem for getting children using getElementsByClassName method.
I'm using OOP way just like Jquery Does.
"use strict";
var $, i;
(function() {
$ = function(el) {
return new obj$(el);
};
var obj$ = function(el) {
var firstChar = el.charAt(0),
cl = document.getElementsByClassName(el.slice(1));
switch (firstChar) {
case ".":
for (i = 0; i < this.length; i++) {
this[i] = cl[i];
}
break;
}
};
obj$.prototype = {
find : function(child) {
for (i = 0; i < this.length; i++) {
this[i].getElementsByClassName(child)[0];
}
return this;
},
html : function(data) {
for (i = 0; i < this.length; i++) {
this[i].innerHTML = data;
}
return this;
}
};
})();
var x = $(".parent").find("child").html("replace!");
console.log(x);
<div class="parent">
this is parent 1
<p class="child">test 1</p>
</div>
<div class="parent">
this is parent 2
<p class="child">test 2</p>
</div>
<div class="parent">
this is parent 3
<p class="child">test 3</p>
</div>
jsFiddle : https://jsfiddle.net/Lng5mn3o/
It doesn't work.
I have updated fiddle for you - https://jsfiddle.net/Lng5mn3o/3/
The main thing what i changed in your jsfiddle example, i created this['elements'] to store matched elements and used it length in loop rest was ok in your code
// define blank array
this['elements'] = new Array();
// store elements
this['elements'][i] = cl[i];
// loop over that elements
for (i = 0; i < this['elements'].length; i++) {

JS function should affect all divs with same class

My function only works with the first element.
What do I have to change so that all elements with the class .folder are affected by the function update.
<div class="folder"></div>
<div class="folder"></div>
<div class="folder"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var radioButtons = document.getElementsByName('colorOut');
for(var i = 0; i < radioButtons.length; i++) {
radioButtons[i].addEventListener('change', update, false);
}
function update() {
var paragraph = document.querySelector('.folder');
paragraph.className = 'folder';
for(var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
paragraph.classList.add(radioButtons[i].value);
}
}
}
update();
});
</script>
You have this:
document.getElementsByName
that's the wrong syntax, you need:
document.getElementsByClassName

Categories