We Keep Coding

Multiple Class Names - getelementsbyclassname

Basically I want a logo to change, there are 2 current logos, individually labelled with the classes... 'Header-branding-logo' & 'Mobile-bar-branding-logo'. I can change either one of them, but not at both at the same time.
I can't seem to figure out where I need to put it. Can anyone help?
<script>
window.onload = function() {
document.getElementsByClassName('Header-branding-logo')[0].src = 'https://static1.squarespace.com/static/5a9e8da0aa49a18379207907/t/5ac52f062b6a28a603df30cf/1522872070340/GBL+Shop+-+Black+1500.png';
};
</script>
UPDATE
Thanks to the genius below, this now works for me
<script>
window.onload = function() {
var elements = document.querySelectorAll('.Header-branding-logo,.Mobile-bar-branding-logo');
elements.forEach((element) => {
element.src = "https://static1.squarespace.com/static/5a9e8da0aa49a18379207907/t/5ac52f062b6a28a603df30cf/1522872070340/GBL+Shop+-+Black+1500.png"
})
};
</script>

Please use the querySelectorAll function
var elements = document.querySelectorAll('.Header-branding-logo,.Mobile-bar-branding-logo');
elements.forEach((element) => {
element.src = "https://static1.squarespace.com/static/5a9e8da0aa49a18379207907/t/5ac52f062b6a28a603df30cf/1522872070340/GBL+Shop+-+Black+1500.png"
})

<script>
window.onload = function() {
var classes = document.querySelectorAll(".Header-branding-logo, .Mobile-bar-branding-logo") // Gets multiple classes whereas getElementsByClassName() fetches only one. Also dont miss the '.' before classnames here
for(i = 0; i <= classes.length; i++){
classes[i].src = "https://static1.squarespace.com/static/5a9e8da0aa49a18379207907/t/5ac52f062b6a28a603df30cf/1522872070340/GBL+Shop+-+Black+1500.png"
}
}

Javascript make image in data-attr an inline background image after X seconds

The problem
I have a div that has a list of image paths stored in a data attribute, like so:
<!-- Multiple background images stored in data-attr -->
<div class="banner" data-bg="http://placehold.it/350x150, http://placehold.it/350x250, http://placehold.it/350x350"></div>
I have written some Javascript that retrieves the data attribute and splits the URLs into an array:
function backgroundPhader(){
//get bg el
var bg_el = document.getElementsByClassName('banner')[0];
//make empty bg array
var bg_arr = [];
//console.log(bg_el);
//get data-attr of bgs
var bg_data = bg_el.getAttribute("data-bg");
//console.log(bg_data);
bg_arr = bg_data.split(",");
console.log(bg_arr);
}
backgroundPhader();
Where to next
What I now want to try do if it's not too complex with pure Javascript is to take each item in the array and apply it as an inline background-image - one at a time over a set period of time. I can't work out how to pull out a single item from the array and apply it as an inline style.
Help pointing me in the right direction would be great. I also have a fiddle if it helps.

setInterval will invoke the function after specified interval.
split will split string and return array using mentioned separator. One can use index of array to get the values of the array.
Try this:
function backgroundPhader() {
var bg_el = document.getElementsByClassName('banner')[0];
var bg_data = bg_el.getAttribute("data-bg");
var bg_arr = bg_data.split(",");
var val = 0;
var iterator = function() {
if (val > bg_arr.length - 1) {
val = 0;
}
document.body.style.backgroundImage = 'url(' + bg_arr[val] + ')';
++val;
};
iterator();
setInterval(iterator, 1000);
}
backgroundPhader();
<!-- Multiple background images stored in data-attr -->
<div class="banner" data-bg="http://placehold.it/350x150, http://placehold.it/350x250, http://placehold.it/350x350"></div>

Adding random number of images inside div

I have a <div> and i want to add images into it. The number of images will vary randomly.
here is what i am trying to do
$(document).ready(function () {
var img = document.getElementById("img");
$('#button').click(function () {
var randomnumber = Math.floor(Math.random() * 11) + 1;
for (var i = 1; i < = randomnumber; i++) {
$(this).append(img);
}
});
});
But it is not working. Please help
here is my code JSFiddle

You should probably use clone as simon suggests, or you can create new images:
function getImage(){
var img = new Image();
img.src = "http://cdn.acidcow.com/pics/20110830/lolcats_ever_13.jpg"
img.width = 200;
return img;
}
var rand = Math.floor(Math.random() * 11) + 1,
imgContainer = $("#imgContainer"),
i;
$("#imgNo").text(rand);
for (i=0; i<rand; i++){
imgContainer.append(getImage());
}
fiddle

uhm, you aren't defining any new images. I am not sure from where you are getting your images. If you have differeny images, you can use the next loop. Besides that, the this points to the #button element. Not sure which item it is, but if it's an input button, then it won't work. you have to use a div or article or section ... as target.
$(document).ready(function () {
$('#button').click(function () {
// random number
var randomnumber = Math.floor(Math.random() * 11) + 1;
// insert images
for (var i = 1; i < = randomnumber; i++) {
// create a new img - element
var img = document.createElement('img');
// give it an id
img.attr("id","img_" + i);
// source, link
img.attr("src","your_URL_here");
// put newly created image in the div with id yourDivIdHere
$('#yourDivIdHere').append(img);
}
});
});
the id has to be unique, that's why i'm using the index of the for loop for the id of the newly created element. Having same id for multiple HTML elements can lead to issues.
#yourDivIdHere means the div with the id yourDivIdHere, like
<div id="yourDivIdHere"></div>
When you are re-using the button, simply clear the content by using $('#yourDivIdHere').empty() method if you don't want to see that old images are still there after clicking on the button.

You need to clone the image:
$(this).append( $(img).clone() );
Your way always puts the same image (only one instance!) inside of div random amount of times. So in the end it is only one image.
If you clone it every time then you will have N amount of images

You are getting elements by id, so appended element is always the same element with id="img". Read about jQuery find() to find all elements.

How to use jQuery event in sequence

I am trying to play around with learning jQuery and have made the following jsFiddle:
http://jsfiddle.net/jkNK3/
The idea is to have a div's color change on click. Fine, I got that but I am wondering if there is a way to have the div's color change through multiple classes changes, perhaps with some sort of array or loop. Let me explain.
I have created several CSS classes like so:
.color1 {..}
.color2 {..}
.color3 {..}
.color4 {..}
.color5 {..}
.color6 {..}
and am wondering if we can do something like
addClass("color" + i)
where i can be looped through 1 - 6.
Is there any way to accomplish this? Thanks for the help.

This is a good place to consider the danger of global javascript namespaces. Here's a simple example that takes advantage of closures to avoid that with jquery:
$(function() {
var numb = 1;
// this bit of managing the color state swap is another topic for discussion, so keeping it simple
var colors_len = 6;
$("div").click(function() {
// this closure has access to the numb variable
if (numb < colors_len) {
numb++;
$(this).addClass("color" + numb);
$(this).removeClass("color" + (numb-1));
} else {
numb = 1;
$(this).removeClass("color" + colors_len);
$(this).addClass("color" + numb);
}
});
});
http://jsfiddle.net/2taH5/
ps. Jquery ui also has a swap class method but that is more for animations

In my opinion the easiest would be to just store the color number in jQuery's handy data(), and then increment it from that:
function fnClick() {
var numb = $(this).data('color') || 2;
$(this).addClass("color" + numb).data('color', ++numb)
}
FIDDLE
To make it go back to the first color after the last color etc
function fnClick() {
var numb = $(this).data('color') || 2;
numb = numb == 7 ? 1 : numb;
$(this).removeClass().addClass("color" + numb).data('color', ++numb)
}
FIDDLE

How about using a random number to give a random color to the div.
var classCount = 6;
$(document).ready(function () {
$("div").on("click", fnClick);
});
function fnClick(e) {
// Get the currently clicked element
var $this = $(e.target),
className = 'color' + Math.floor((Math.random() * classCount )+1);
// Remove the exixting class/s
$this.removeClass();
// Add the class
$this.addClass(className);
}
Check Fiddle

Creating divs with different id's

i have one question regarding creation of divs:
I have button, when user clicks on it, javascript (or jquery) needs to create a div. But when user clicks again, it should create another div, but with different id. So, every time user clicks should be created div with different id.
I partialy know how to create div, but i have no idea how to make divs with different id's.

var c = 0; // Counter
$('#add').on('click', function() {
c += 1;
$('#parent').append('<div id="child'+ c +'">'+ c +'</div>');
});
#child1{color:red;}
#child2{color:blue;}
#child3{color:orange;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">ADD</button>
<div id="parent"></div>

var divcount = 1;
$('button').click(function(){
$('<div/>', { id:'comment'+divcount++ })
});

Here's a random ID generator for you.
function createParanoidID() {
return 'id_' + Math.floor(Math.random() * 9e99).toString(36);
}
createParanoidID(); // id_1js7ogi93ixt6x29w9svozegzhal67opdt3l3cf1iqidvgazlyaeh1ha7a74bswsg
createParanoidID(); // id_1fleq6chguuyyljhy39x3g7mg661mg845oj8fphnxgvm0bdgz7t3w0q01jptogvls
createParanoidID(); // id_ajz1ft17ml4eyz08gd3thcvq3fx1ycr927i0h2zgyw8bzq9wurv1gdfogly8tbls

Using a variable as counter and the "attr" function to set the id attribute.

HTML
<button id="button">Create Div</button>
<div class="container"></div>
jQuery:
$('#button').on('click', function() {
var count = $('div.container div').length,
id = count + Math.floor(Math.random() * 100);
$('div.container').append('<div id="'+ id+'">ID of this div is: '+ id +' </div>');
});
DEMO

Here's the easy way to do this.
Firstly, you'll need a button:
​<button id="onClickOfThis​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ButtonAnewDivWithArandomIDwillBeInserted"></button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
Then the javascript:
$("#onClickOfThisButtonAnewDivWithArandomIDwillBeInserted").on('click', function() {
var myID = 'randomIDnumber_'+Math.random()+Math.random()+Math.random()+Math.random()+Math.random()+Math.random();
var MyNewElement = document.createElement('div');
MyNewElement.id = myID.replace(/\./g, '');
$(MyNewElement).appendTo('body');
});
Here's a FIDDLE

If you don't want to use global counter like in previous answers you can always get number of children and use that as relative value from which you will create another id.
Something like this (with jQuery):
function add_another_div() {
var wrap_div = document.getElementById("#id_of_div_who_contain_all_childrens");
var already_childs = $("#id_of_div_who_contain_all_childrens").children().length;
var div = document.createElement('div');
var divIdName = 'new_div-'+ (already_childs+1);
div.setAttribute('id', divIdName);
wrap_div.appendChild(div);
}
Of course, this requires for all of your children to have same parent (same wrapper). If that is not the case, and they are separated across multiple wrappers, then just use unique class name for all of them, and count them like that. I found this approach much better and easier instead of using global counters which I need to take care about.