CODEWITHSUNDEEP
javascriptjqueryhtmlcssarrays
shaun
shaun

Reputation: 1017

Javascript not selecting background color from array

I am trying to make a subheader with several different colors, almost like the one on the Ask Different page. The only difference is that instead of having specific colors, I am trying to get it to randomly select a color from a Javascript array.

I have already defined the hexadecimal colors I want to use, the problem I am facing is that it isn't displaying it correctly (at all for that matter) in the HTML page. Can someone walk me through how to fix this? If this can be accomplished using jQuery, that would work as well.

Here is what I have so far:

Javascript:

var colors = ['#3399FF', '#44A1FF', '#55AAFF', '#65B2FF', '#76BBFF', '#87C3FF', '#98CCFF', '#A9D4FF', '#BADDFF', '#CAE5FF', '#DBEEFF', '#ECF6FF'];

onload = changeColor();

function changeColor() {
    subheader.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
}

HTML:

<div class="header"></div>
<div class="subheader" id="sub1"></div>
<div class="subheader" id="sub2"></div>
<div class="subheader" id="sub3"></div>
<!-- Repeats till id="sub20" -->

CSS:

.header {
    width:100%;
    height:10%;
    position:absolute;
    background-color:#3399FF;
    left:0;
    top:0;
}
.subheader {
    height:2%;
    width:5%;
    top:10%;
    position:absolute;
}
#sub1 {left:0;}
#sub2 {left:5%;}
#sub3 {left:10%;}
/* Repeats till #sub20 */

FIDDLE

Also, if there is a way to shorten my rather extensive HTML and CSS maybe by using something like :nth-child(), please include that in your answer if you know how. Thank you, any help is appreciated.

Upvotes: 0

Views: 54

Answers (2)

Downgoat
Downgoat

Reputation: 14371

You have a small problem with the JavaScript

JavaScript

var colors = ['#3399FF', '#44A1FF', '#55AAFF', '#65B2FF', '#76BBFF', '#87C3FF', '#98CCFF', '#A9D4FF', '#BADDFF', '#CAE5FF', '#DBEEFF', '#ECF6FF'],
    elems = document.getElementsByClassName('sub-header'),
    i;

for (i = 0; i < elems.length; i += 1) {
  var color = color = colors[Math.floor(Math.random() * colors.length)];
  elems[i].style.backgroundColor = color;
}

Fiddle

Explanation

The error with your code was that you had types sub-header.style the compiler assumes sub-header is a variable but it isn't defined. What we have done is added the variable (elems), looped through it, and applied the color. Another issue is that - aren't supported for variable names. I hope this helped

Upvotes: 0

sinisake
sinisake

Reputation: 11328

var colors = ['#3399FF', '#44A1FF', '#55AAFF', '#65B2FF', '#76BBFF', '#87C3FF', '#98CCFF', '#A9D4FF', '#BADDFF', '#CAE5FF', '#DBEEFF', '#ECF6FF'];

onload = changeColor();



    function changeColor() {
        subheader=document.getElementsByClassName('sub-header');
        for(i=0;i<subheader.length;i++){
        subheader[i].style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
        }
    }

demo: https://jsfiddle.net/2asvho0c/4/

Upvotes: 2

Related Questions