title: Onclick add class to 2nd child div || Javascript
body: <p>I'm trying to add the "on" class to the second child, but my code doesn't seem to work. Is it possible? Or how is it possible? </p>
  
  <p>I'm a rookie and have tried multiple several forums and tutorials before asking this question. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!--PARENT--&gt;
  &lt;div class="element" id="elem1" onclick="addClass()"&gt;
  
    &lt;!--FIRST CHILD--&gt;
    &lt;div&gt;
    &lt;/div&gt;
  
    &lt;!--SECOND CHILD--&gt;
    &lt;div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;!--PARENT--&gt;
  &lt;div class="element" id="elem2" onclick="addClass()"&gt;
  
    &lt;!--FIRST CHILD--&gt;
    &lt;div&gt;
    &lt;/div&gt;
  
    &lt;!--SECOND CHILD--&gt;
    &lt;div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;!--PARENT--&gt;
  &lt;div class="element" id="elem3" onclick="addClass()"&gt;
  
    &lt;!--FIRST CHILD--&gt;
    &lt;div&gt;
    &lt;/div&gt;
  
    &lt;!--SECOND CHILD--&gt;
    &lt;div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>element{
  display:none;
  }
  
  on{
  display:initial;
  }
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>function addClass(){
    var element= document.getElementsByClassName("element").children;
  
  
    element[1].classList.add('on');
    element[1].value ="on";
  }
  </code></pre>
  
  <p>CODEPEN:</p>
  
  <p><a href="http://codepen.io/salman15/pen/woaQQW?editors=1010" rel="nofollow noreferrer">http://codepen.io/salman15/pen/woaQQW?editors=1010</a></p>