scavenger hunt js just js no jquery

vanilla js

by Nick Hulea

HTML

<link rel="stylesheet" href="http://stage.nhm.org/nature/sites/all/themes/nature/css/global.css">
<script src="http://stage.nhm.org/nature/sites/all/themes/nature/js/global.min.js"></script>
<section>
    <div class="scavenger">
        <div class="columnControl">
            <!--Question-->
            <div id="question">
                 <h2></h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend in mi id sollicitudin. Sed molestie sodales ligula vulputate suscipit ?</p>
                <div id="abutton" class="half a 1">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id mi eget mi scelerisque tincidunt sollicitudin eget magna. Nunc id.</p>
                    <input type="text" style="display:none;" id="a" name="a" value="a" />
                </div>
                <!-- End .half -->
                <div id="abutton" class="half a 2">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id mi eget mi scelerisque tincidunt sollicitudin eget magna. Nunc id.</p>
                    <input type="text" style="display:none;" id="b" name="b" value="b" />
                </div>
                <!-- End .half -->
                <div id="abutton" class="half a 3">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id mi eget mi scelerisque tincidunt sollicitudin eget magna. Nunc id.</p>
                    <input type="text" style="display:none;" id="c" name="c" value="c" />
                </div>
                <!-- End .half -->
                <div id="abutton" class="half a 4">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec. Lorem ipsum dolor sit amet,...

CSS

/* scavenger css styles */
      .scavenger {
          margin-bottom:10%;
      }
      .scavenger .blockbutton {
          margin-top:8%;
      }
      .scavenger .half {
          padding: 3px;
          float: right;
          margin: 2px;
      }
      .scavenger .whole {
          padding:5px;
          margin: 5px;
      }
      .scavenger .wholeimg {
          float: left;
          width: 43%;
          margin:2.5%;
          padding:1%;
      }
      .scavenger .wholeimg img {
          width: 100%;
      }
      .scavenger .half:hover, .whole:hover, .wholeimg:hover {
          background-color:#8bb611;
          color:#ffffff;
          cursor:pointer;
      }
      .scavenger .sclick {
          background-color:#8bb611;
          color:#ffffff;
      }
      .scavenger label {
          font-size: 20px;
      }
      .scavenger .half p, .whole p {
          font-size: 13px;
          margin-bottom: 0;
      }
      .scavenger .mediaItem, .scavenger .mediaItem iframe {
          display: block;
          left: 0;
          margin: 0;
          position: relative;
          top: 0;
      }

JavaScript

var classbutton = document.getElementsByClassName('a');

function add_removeMulti() {
    for (var i = 0; i < classbutton.length; ++i) {
        var item = classbutton[i];
        item.classList.remove("sclick");
    }
    this.classList.add("sclick");
}
for (var i = 0; i < classbutton.length; ++i) {
    var item = classbutton[i];
    item.onclick = add_removeMulti;
}