I was wondering if there isn't a smarter way to work with classes between javascript and css. As I understander the "only" / most common way to select all elements with the same class is by making a for loop:
jsfiddle.net/JoshuaChronstedt/obk92sh6/2/
var elems = document.getElementsByClassName("helloClass");
for (var i = 0; i < elems.length; i++) {
elems[i].style.background = "red";
}
Wouldn't it be possible to create a function to hold the for loop? I'm a noob to js and can't seem to make it work:
jsfiddle.net/JoshuaChronstedt/obk92sh6/6/
function getClass(getClassName) {
var elems = document.getElementsByClassName("getClassName");
for (var i = 0; i < elems.length; i++) {
elems[i];
}
}
getClass("helloClass").style.background = "red";
getClass("helloClassTwo").style.background = "blue";
I guess what I am ultimately trying to do is find a more readable and more DRY way of editing elements by class names.
edit:
Thanks for the snippets. I have tried using some of the code that has been sugested. But it still doesn't seem to work:
function getClass(getClassName) {
Array.from(document.querySelectorAll('.' + '\'' + getClassName + '\'')).forEach(e => e);
}
getClass(helloClass).style.background = 'yellow';
getClass(helloClassTwo).style.color = 'red';
<div class="helloClass">
hello class
</div>
<div class="helloClass">
hello class
</div>
<div class="helloClassTwo">
hello class Two
</div>
<div class="helloClassTwo">
hello class Two
</div>
You can implement map function to iterate.map function iterates elements in array.
Hence here you need to change normal object to array first using Array.from() method
var elems;
function getClass(getClassfuncCont) {
return document.getElementsByClassName(getClassfuncCont);
}
elems = getClass("helloClass");
Array.from(elems).map(element=>element.style.background = "red");
Please refer working snippet.
var elems;
function getClass(getClassfuncCont) {
return document.getElementsByClassName(getClassfuncCont);
}
elems = getClass("helloClass");
Array.from(elems).map(element=>element.style.background = "red");
<div class="helloClass">
hello class
</div>
<div class="helloClass">
hello class
</div>
<div class="helloClass">
hello class
</div>
As mentioned in one of the comments, you're passing getClassName as string when you're supposed to pass it as variable. Taking away the double quote should make it work.
However, you won't be able to modify the style property the way you're doing it right now, because your function does not return the elements. If what you're trying to do is batch-changing the background color based on class name, I suggest adding the color name as a second variable:
//renaming the function so it's more representative
function colorBackgroundByClass(getClassName,color) {
var elems = document.getElementsByClassName(getClassName);
for (var i = 0; i < elems.length; i++) {
elems[i].style.background = color;
}
}
colorBackgroundByClass("helloClass","red");
colorBackgroundByClass("helloClassTwo","blue");
Related
I'm trying to apply the onclick event with JavaScript to the following elements:
<div class="abc">first</div>
<div class="abc">second</div>
<div class="abc">third</div>
If I click on the first element (with index [0]) then this works, but I
need this event applicable for all classes:
document.getElementsByClassName('abc')[0].onclick="function(){fun1();}";
function fun1(){
document.getElementsByClassName('abc').style.color="red";
}
.onclick does not expect to receive a string, and in fact you don't need an extra function at all.
However, to assign it to each element, use a loop, like I'm sure you must have learned about in a beginner tutorial.
var els = document.getElementsByClassName('abc');
for (var i = 0; i < els.length; i++) {
els[i].onclick = fun1;
}
function fun1() {
this.style.color = "red";
}
<div class="abc">first</div>
<div class="abc">second</div>
<div class="abc">third</div>
To expand on the solution provided by #rock star I added two small additions to the function. First it is better to add / reemove a class (with an associated style rule) to an element than directly applying the stylerule to the element.
Secondly - on the click event - this will now remove the red class (and therefore style) from the previously selected element and add it to the new element. This will allow only one element to be red at a time (in the original solution any element that was clicked would become red).
var els = document.getElementsByClassName('abc');
for (var i = 0; i < els.length; i++) {
els[i].onclick = fun1;
}
function fun1() {
var oldLink = document.getElementsByClassName('red')[0];
if(oldLink) {oldLink.classList.remove('red')};
this.classList.add('red');
}
.red {
color:red;
}
<div class="abc">first</div>
<div class="abc">second</div>
<div class="abc">third</div>
This works:
<body>
<div class="abc">first</div>
<div class="abc">second</div>
<div class="abc">third</div>
<script>
var elements = document.getElementsByClassName('abc');
for(var i = 0, max = elements.length; i < max; i += 1) {
var clickedElement = elements[i];
clickedElement.onclick=function (){
fun1(this);
};
}
function fun1(element){
element.style.color="red";
}
</script>
</body>
I am trying to toggle multiple classes onclick using vanilla Javascript. What i am trying to do is when a btn is clicked two classes to toggle with another two classes. I have 5 classes in total which are: .menu_btn , .main_nav, .btn_active, .container, .container_active. When i press the .menu_btn i would like the classes .main_nav to toggle with .btn_active and at the same time i would like to have the .container to toggle with .container_active. The class .container is the only one that has 5 elements of that class, the others are single. I have done this using jQuery but i would like to know the way using vanilla Javascript. Hopefully someone can help.
One thing to point out is when i console.log the .btn_active and .container_active i get back [ ] an empty array. Those 2 css classes are not assigned to any element of my project. They are existing only in the css and their purpose is for toggle.
Thanks
jQuery Code:
$(function(){
$(".menu_btn").on("click", function(){
$(".main_nav").toggleClass("btn_active");
$(".container").toggleClass("container_active");
});
});
Vanilla Javascript Code:
var menuBtn = document.getElementsByClassName("menu_btn");
var mainNav = document.getElementsByClassName("main_nav");
var btnActive = document.getElementsByClassName("btn_active");
var container = document.getElementsByClassName("container");
var containerActive = document.getElementsByClassName("container_active");
menuBtn.onclick = function(){
mainNav.classList.toggle(btnActive);
for ( index = 0; index <= container.lenght -1; index++ ){
container[index].classList.toggle(containerActive);
}
};
I have modified your script and created a fiddle so you see how it works: https://jsfiddle.net/eyrpdsc2/
The toggle accepts a string as a parameter, not a Node. So you need to pass 'btn_active' instead of btnActive. Also keep in mind that querySelectorAll returns a NodeList (not an array) so you cannot use forEach.
var menuBtn = document.querySelectorAll(".menu_btn");
var mainNav = document.querySelectorAll(".main_nav");
var container = document.querySelectorAll(".container");
for (var i = 0; i < menuBtn.length; ++i) {
menuBtn[i].addEventListener('click', toggleClasses);
}
function toggleClasses() {
var i = 0;
for (i = 0; i < mainNav.length; ++i) {
mainNav[i].classList.toggle('btn_active');
}
for (i = 0; i < container.length; ++i) {
container[i].classList.toggle('container_active');
}
}
I'm having a strange issue with replaceWith (or more likely with object referencing).
I am trying to create a kind of table of rows that either have empty slots or full slots. As a demonstration I made this simple fiddle. http://jsfiddle.net/Ltxtvyn3/3/ In this fiddle 4 empty slots are initialized. Then one is filled. Then the same one should be emptied. But instead it is remaining filled. It is as if I can only use replaceWith once, or I am not understanding something about my object references.
HTML
<div class = "slot empty">Empty</div>
<div class = "slot full">Full</div>
<div class = "wrapper"></div>
CSS
.slot{
width:50px;
height:50px;
display:none;
}
.empty{
background-color:red;
}
.full{
background-color:blue;
}
Javascript
var wrapper = $('.wrapper');
var empty = $('.slot.empty');
var full = $('.slot.full');
var slots = {};
for(var i = 0; i < 4; i++){
slots[i] = empty.clone().show();
wrapper.append(slots[i]);
}
function fillSlot(id){
slots[id].replaceWith(full.clone().show());
}
function emptySlot(id){
slots[id].replaceWith(empty.clone().show());
}
fillSlot(1);
emptySlot(1);
I am hoping that the object var slots maintains a reference to the divs and I'm not sure if it is doing that or not.
No, it's not keeping a reference, but you can fix this pretty easily.
Here's some running code:
var wrapper = $('.wrapper');
var empty = $('.slot.empty');
var full = $('.slot.full');
for(var i = 0; i < 4; i++){
wrapper.append(empty.clone().show());
}
function fillSlot(id){
$(".wrapper .slot").eq(id).replaceWith(full.clone().show());
}
function emptySlot(id){
$(".wrapper .slot").eq(id).replaceWith(empty.clone().show());
}
fillSlot(1);
setTimeout(function() {
emptySlot(1);
}, 2000);
.slot{
width:50px;
height:50px;
display:none;
}
.empty{
background-color:red;
}
.full{
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class = "slot empty">Empty</div>
<div class = "slot full">Full</div>
<div class = "wrapper"></div>
Thanks for the answers. I know understand why the object doesn't keep a reference, and I really wanted that to be the case. I simply added a wrapper slot and then I will affect the contents of the wrapper. That way I always have a reference to the slot.
HTML
<div class="slot-content empty">Empty</div>
<div class="slot-content full">Full</div>
<div class = "slot"></div>
<div id="wrapper"></div>
Javascript
var wrapper = $('#wrapper');
var slot = $('.slot');
var empty = $('.slot-content.empty');
var full = $('.slot-content.full');
var slots = {};
for(var i = 0; i < 4; i++){
slots[i] = slot.clone().show();
slots[i].html(empty.clone().show());
wrapper.append(slots[i]);
}
function fillSlot(id){
slots[id].html(full.clone().show());
slots[id].find('.slot-content').html('hello');
}
function emptySlot(id){
slots[id].html(empty.clone().show());
}
fillSlot(1);
emptySlot(1);
fillSlot(2);
UPDATED
Your code work fine just if you change the selection method and you don't want slots list no more.
Replace :
function fillSlot(id){
slots[id].replaceWith(full.clone().show());
}
function emptySlot(id){
slots[id].replaceWith(empty.clone().show());
}
BY :
function fillSlot(id){
wrapper.children().eq(id).replaceWith(full.clone().show());
}
function emptySlot(id){
wrapper.children().eq(id).replaceWith(empty.clone().show());
}
Selecting directly from wrapper what means selecting from fresh DOM. that will fix the problem, take a look at updated fiddle bellow.
Updated JSFiddle
The problem is slots[i] isn't pointing to the div - so replaceWith won't pick the right item. Update the loop as follows (adding slots[i] = wrapper.find(':last-child') ):
for(var i = 0; i < 4; i++){
slots[i] = empty.clone().show();
wrapper.append(slots[i]);
slots[i] = wrapper.find(':last-child')
}
Actually this may make the code a little easier to understand (replace loop with this instead)
for(var i = 0; i < 4; i++){
wrapper.append(empty.clone().show());
slots[i] = wrapper.find(':last-child')
}
Tested and works on FF..
It's not keeping a reference to the DOM element. If you still want to use the array, then you can just repopulate the list every time you update one of its elements. Not terribly efficient, but I suppose it saves you from keeping state in the DOM.
function redraw() {
$('.wrapper').empty();
for(var i = 0; i < 4; i++){
wrapper.append(slots[i]);
}
}
JSFiddle
So I have a Javscript that can retrieve the id from onClick, but it only selects the first div with an id. The problem is that I have multiple unique id's that are generated in php and then saved in mysql database. The id's are unique but I need my onClick to retrieve the id in the div block.
function postFunction() {
var i;
var x;
for (i = 0; i< x.length; i++)
x = document.getElementsByClassName("post")[0].getAttribute("id");
//alert(this.id);
alert(x);
}
Is there a way to select id per code block?
I see you have the jQuery tag in your question. Try this:
function postFunction() {
var ids = []; //in case you need to have all ids;
$('.post').each(function() {
var id = $(this).attr('id');
ids.push(id); //Store the id in the array
alert(id);
});
console.log(ids); //Show all ids.
}
Using Jquery will make life easier.
var h=[];
$("div").each(function(){
h.push($(this).attr('id'));
});
alert(h);
You will get a array of all div ID's.
You need to get the elements, and then loop over them (currently your loop code doesn't do anything)
function postFunction() {
var postEls = document.getElementsByClassName('post'),
postElsCount = postEls.length;
for (var i = 0; i < postElsCount; i++) {
alert(postEls[i].id);
}
}
Here's a fiddle
jQuery will always ease such operations but you can also achieve the same using vanilla javascript. It takes effort & time because of cross browser support for javascript varies much but it's worth to give a try.
function postFunction() {
var ids = [];
var x = document.getElementByClassName('post');
for (var i = 0; i < x.length; i++) {
var temp = x[i].getAttribute("id");
ids.push(temp);
}
console.log(ids)
}
Without jQuery:
function postFunction() {
var ids = Array.prototype.map.call(document.getElementsByClassName("post"), function(elem) {
return elem.id
});
console.log(ids.join(", "));
}
getElementsByClassName() returns a list of all HTML elements with the provided class name. In your loop, you are only ever alerting the first element returned at index [0].
Try:
var x = document.getElementsByClassName("post");
for (var i = 0; i < x.length; i = i + 1) {
alert(x[i].getAttribute("id"));
}
<!DOCTYPE html>
<html lang="en">
<div id="blah1" class="post"></div>
<div id="blah2" class="post"></div>
<div id="blah3" class="post"></div>
<div id="blah4" class="post"></div>
<div id="blah5" class="post"></div>
</html>
I have a tree structure as follows:
<ul id="theul275">
<li>
<div id="red"></div>
<img id="green" />
<script></script>
<div id="blue"></div>
</li>
</ul>
There are multiple UL's likes this on my page each with a different id. I am getting each UL by doing this:
var child = document.getElementById('theul' + id).getElementsByTagName('*');
the problem is, I only want to get the children of each ul which are either div's or img's.
Is there a way to get elements by multiple tag names?
I really appreciate any help because I am kind of new to JavaScript! Thanks!
Depending on what browsers you may to support, you could use the CSS selector interface.
document.getElementById('theul275').querySelectorAll('div, img');
Or use a library. There are plenty of options out there. I am familiar with two,
MooTools
$('theul275').getElements('div, img');
jQuery
$('#theul275').find('div, img');
Or get a reference to the li node, and loop through each node and check if the nodeName is DIV or IMG.
for (var i = 0, l = child.length; i < l; i++)
{
if (child[i].nodeName == 'DIV' || child[i].nodeName == 'IMG')
{
//...
}
}
You could use a iterative method for this.
var elemArray = document.getElementById('theul' + id).childNodes,
getChildByNodeName = function (elem, pattern) {
var childCollection = [],
re = new RegExp(pattern, 'g'),
getChild = function (elements) {
var childs = elements.childNodes,
i = 0;
if (childs) {
getChild(childs);
for (i = 0; i < childs.length; i += 1) {
if (childs[i].nodeName.match(pattern)) {
childCollection.push(childs[i]);
}
}
}
};
getChild(elem);
return childCollection;
}
var childs2 = getChildByNodeName(elemArray, '^(DIV|IMG)$'); // array of match elements
And just change the pattern ('^(DIV|IMG)$') to suite your needs.
If you can use jQuery, try
var child = $("#theul" + id).find("div,img");
Otherwise, see JavaScript NodeList.