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

Question

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);

}());

Answer 1

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);

Answer 2

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);

}());