CODEWITHSUNDEEP
javascript
user1381806
user1381806

Reputation: 529

Javascript: Find all elements on page and add the same CSS

Currently learning JavaScript and trying to create an expanding Menu.

I'm trying to find all elements of the same class and setting a CSS value on click for all elements in the NodeList. The error I see in console is:

Cannot read property 'style' of undefined

I know it's something to do with the for loop not setting the variable correctly; just not too sure what it is.

JSFiddle

http://jsfiddle.net/dXv68/

HTML

<div class="master">

<a href="#" id="btn-nav">
    <span></span>
    <span>Menu</span>
    <span></span>
</a>

<nav id="main-nav">
  <div class="wrapper">
  <div class="background">
  <div class="slice"></div>
  <div class="slice"></div>
  <div class="slice"></div>
  <div class="slice"></div>

  <div class="slice"></div>
  <div class="slice"></div>
  <div class="slice"></div>
  <div class="slice"></div>

  <div class="slice"></div>
  <div class="slice"></div>
  <div class="slice"></div>
  <div class="slice"></div>
</div>
</div>
</nav>

</div><!-- end master -->

CSS

@import url(http://fonts.googleapis.com/css?family=Droid+Sans);


body {
    background: #2980b9;
    font-family: 'Droid Sans', sans-serif;
}


#btn-nav {
    position:absolute;
    left:10px;
    top:10px;
    width:30px;
    height:30px;
    display:block;
        z-index:1;
}

#btn-nav span:nth-child(2) {
    top:10px;
}

#btn-nav span:nth-child(3) {
    top:20px;
}

#btn-nav span {
    height: 4px;
    width: 30px;
    background: white;
    content: "";
    text-indent: -999em;
    display:inline-block;
    position:absolute;
    zoom: 1;
    top:0px;
    left:0px;
    text-align:center;
    -webkit-transition: top .3s cubic-bezier(0.165,.84,.44,1);
        -webkit-transform: rotate(0deg);
}


#btn-nav:hover > span {
    top:10px;
        -webkit-animation: rotateAni .5s 1s forwards; 
}

#btn-nav:hover > span:nth-child(1) {
  -webkit-animation: rotateAni .5s .5s forwards, expandAni .3s .8s forwards;
}

#btn-nav:hover > span:nth-child(2) {
  -webkit-animation: rotateAni .5s .5s forwards, expandAni-2 .3s .8s forwards;
}

#btn-nav:hover > span:nth-child(3) {
  -webkit-animation: rotateAni .5s .5s forwards, expandAni-3 .3s .8s forwards;
}


@-webkit-keyframes rotateAni {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(90deg);}
}

@-webkit-keyframes expandAni {
  0% {left:0;}
  100% {left:-10px;}
}

@-webkit-keyframes expandAni-2 {
  0% {left:0;}
  100% {left:0px;}
}

@-webkit-keyframes expandAni-3 {
  0% {left:0;}
  100% {left:10px;}
}


#main-nav {
  position:fixed;
  left:0;
  top:0;
  display:block;
  width:100%;
  height:100%;
  z-index:-1;
}

#main-nav .wrapper {
  display:table;
  width:100%;
  height:100%;
}

.slice {
  width:25%;
  height:30%;
  float:left;
  background:black;
  opacity:0;
  -webkit-transition: 1s;
}

.background {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:-1;
}

JS

(function () {
    'use strict';

    var menuBtn = document.getElementById('btn-nav');
    var slice = document.querySelectorAll('.slice');

    for(var i = 0; i <= slice.length; i++) {
        var boxes = slice[i];
    }

    menuBtn.addEventListener('click', function() {
        boxes.style.opacity = 1;
    }, false);

}());

Upvotes: 0

Views: 63

Answers (2)

Sakai
Sakai

Reputation: 637

i liked your code, here follows a gift for you: http://jsfiddle.net/dXv68/3/

here is the secret:

(function () {
    'use strict';

    var menuBtn = document.getElementById('btn-nav');
    var slice = document.querySelectorAll('.slice');

    menuBtn.addEventListener('click', function() {
        for(var key in slice) {
            slice[key].style.opacity = 1;
        }
    }, false);

}());

Upvotes: 1

Kodlee Yin
Kodlee Yin

Reputation: 1089

You need to place the for loop inside the event, as all it's doing currently is setting the LAST slice's opacity.

var menuBtn = document.getElementById('btn-nav');
var slice = document.querySelectorAll('.slice');

menuBtn.addEventListener('click', function() {
    for(var i = 0; i < slice.length; i++) {
        slice[i].style.opacity = 1;
    }
}, false);

Upvotes: 3

Related Questions