title: How to write a better JS function - Input radio with tab box
body: <p>I have written this function in JavaScript to show a text info box about the input radio is checked. It is not working very well. Can some one show me a better way?</p>
  
  <p>I don't know why only 2 input works here, in my page all works good. But I'm sure that there is a better way to write the js function.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('materiali').onclick = function(){myFunction()}; // click on div with input
  
  function myFunction() {
   var materiales = document.getElementsByName('materiale'); // div that contains input
   var materiale_value;
   var materiale_valueName;
  
   for(var i = 0; i &lt; materiales.length; i++){
     if(materiales[i].checked){
       materiale_value = i; // index obj input checked
       materiale_valueName = materiales[i].value; // value of the input checked
     }
   }
  
   var materialiText = document.getElementsByClassName('text')[0].childNodes[materiale_value].className; // Class that contains the relative input text selected
   
    var divNoShow = document.querySelectorAll('.text div'); // all div with text
   
    for (var j = 0; j &lt; divNoShow.length; j++) {
    divNoShow[j].style.display = "none" // don't show all div with text
   }
   document.getElementsByClassName('text')[0].childNodes[materiale_value].style.display = "block"; // show only the div with the class selectd by idex obj
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="materiali" id="materiali"&gt;
    &lt;p class="uppercase"&gt;Choose material&lt;/p&gt;
    &lt;input class="osb" type="radio" name="materiale" id="osb" value="osb"&gt;
     &lt;label&gt;OSB&lt;/label&gt;
    &lt;input class="fir" type="radio" name="materiale" id="fir" value="fir"&gt;
     &lt;label&gt;FIR&lt;/label&gt;
    &lt;input class="mdf" type="radio" name="materiale" id="mdf" value="mdf"&gt;
     &lt;label&gt;MDF&lt;/label&gt;
    &lt;input class="poplar" type="radio" name="materiale" id="poplar" value="poplar"&gt;
     &lt;label&gt;POPLAR&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div class="text"&gt;
   &lt;div class="osb" style="display:none"&gt;OSB Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.&lt;/div&gt;
   &lt;div class="fir" style="display:none"&gt;FIR Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.&lt;/div&gt;
   &lt;div class="mdf" style="display:none"&gt;MDF Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.&lt;/div&gt;
   &lt;div class="poplar" style="display:none"&gt;POPOLAR Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>