title: How to use on addEventListener on radio button in Plain Javascript?
body: <p>How can i attach event listener on a radio button in my html? Considering this form:</p>
  
  <pre class="lang-php prettyprint-override"><code>&lt;label&gt;
      &lt;input name="contract_duration" type="radio" value="6-Months" {{ $contract &amp;&amp; $contract-&gt;contract_duration === '6-Months' ? 'checked' : ''  }} /&gt;
      &lt;span&gt;6-Months&lt;/span&gt;
  &lt;/label&gt;
  
  &lt;label&gt;
      &lt;input name="contract_duration" type="radio" value="1-Year" {{ $contract &amp;&amp; $contract-&gt;contract_duration === '1-Year' ? 'checked' : ''  }} /&gt;
      &lt;span&gt;1-Year&lt;/span&gt;
  &lt;/label&gt;
  
  &lt;label&gt;
      &lt;input name="contract_duration" type="radio" value="2-Years" {{ $contract &amp;&amp; $contract-&gt;contract_duration === '2-Years' ? 'checked' : ''  }} /&gt;
      &lt;span&gt;2-Years&lt;/span&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p>and this is my Javascript:</p>
  
  <pre><code>if(document.querySelector('input[name="contract_duration"]')){
      document.querySelector('input[name="contract_duration"]').addEventListener("click", function(){
          var item = document.querySelector('input[name="contract_duration"]').value;
          console.log(item);
      });
  }
  </code></pre>
  
  <p>during execution, my codes only log the first one, which is the <code>6-Months</code> others if click shows nothing.</p>