title: Find the value attribute of an active button
body: <p>I am trying to do a simple calculation based on a few inputs, however I am unable to get the value from the currently active HTML button class using Javascript.</p>
  <p>The code loops through the buttons and adds the active class to the current/clicked button. I then want the calculation to be based off the value of that active button.</p>
  <p>The variable &quot;rating&quot; returns undefined.</p>
  <p>What would be the correct way to do this?</p>
  <p>HTML:</p>
  <pre><code>   &lt;div class=&quot;finance-calc&quot;&gt;
         &lt;div class=&quot;finance-entry&quot;&gt;
             &lt;h1 class=&quot;title&quot;&gt;Finance calculator&lt;/h1&gt;
             &lt;div class=&quot;finance-inputs&quot;&gt;
                 &lt;div class=&quot;amount&quot;&gt;
                     &lt;h4&gt;I'd like to borrow&lt;/h4&gt;
                     &lt;input id=&quot;finance-amount-input&quot; type=&quot;text&quot;&gt;
                 &lt;/div&gt;
                 &lt;div class=&quot;term&quot;&gt;
                     &lt;h4&gt;Over a period of&lt;/h4&gt;
                     &lt;select name=&quot;term&quot; id=&quot;finance-term-input&quot;&gt;
                         &lt;option value=&quot;12&quot;&gt;12 months&lt;/option&gt;
                         &lt;option value=&quot;24&quot;&gt;24 months&lt;/option&gt;
                         &lt;option value=&quot;36&quot;&gt;36 months&lt;/option&gt;
                         &lt;option value=&quot;48&quot;&gt;48 months&lt;/option&gt;
                     &lt;/select&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
             &lt;h2 class=&quot;rating&quot;&gt;Rating&lt;/h2&gt;
             &lt;div id=&quot;finance-options&quot;&gt;
                 &lt;button id=&quot;excellent&quot; value=&quot;2&quot; class=&quot;btn active&quot;&gt;Excellent&lt;/button&gt;
                 &lt;button id=&quot;good&quot; value=&quot;1.13&quot; class=&quot;btn&quot;&gt;Good&lt;/button&gt;
                 &lt;button id=&quot;average&quot; value=&quot;1.14&quot; class=&quot;btn&quot;&gt;Average&lt;/button&gt;
                 &lt;button id=&quot;bad&quot; value=&quot;1.15&quot; class=&quot;btn&quot;&gt;Bad&lt;/button&gt;
             &lt;/div&gt;
         &lt;/div&gt;
         &lt;div class=&quot;finance-output&quot;&gt;
             &lt;div id=&quot;result&quot;&gt;&lt;/div&gt;
             &lt;div id=&quot;total-payable&quot;&gt;Total payable: £5420&lt;/div&gt;
             &lt;button id=&quot;calculate&quot; value=&quot;10&quot;&gt;Calculate&lt;/button&gt;
             &lt;button class=&quot;apply-btn&quot;&gt;Apply Now&lt;/button&gt;
         &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  <p>JS:</p>
  <pre><code>// Get the container element
  var btnContainer = document.getElementById(&quot;finance-options&quot;);
  
  // Get all buttons with class=&quot;btn&quot; inside the container
  var btns = btnContainer.getElementsByClassName(&quot;btn&quot;);
  
  // Loop through the buttons and add the active class to the current/clicked button
  for (var i = 0; i &lt; btns.length; i++) {
    btns[i].addEventListener(&quot;click&quot;, function () {
      var current = document.getElementsByClassName(&quot;active&quot;);
      current[0].className = current[0].className.replace(&quot; active&quot;, &quot;&quot;);
      this.className += &quot; active&quot;;
    });
  }
  
  // Calculate button
  const calculate = document.getElementById(&quot;calculate&quot;);
  
  // Button click calculates monthly payment
  calculate.addEventListener(&quot;click&quot;, function () {
    const amount = document.getElementById(&quot;finance-amount-input&quot;).value;
    const term = document.getElementById(&quot;finance-term-input&quot;).value;
    const rating = document.getElementsByClassName(&quot;active&quot;).value; // i want this line to find the value attribute of the active button
  
    const loan = (amount * rating) / term;
  
    document.getElementById(&quot;result&quot;).innerHTML = &quot;£&quot; + loan.toFixed(2) + &quot; PCM&quot;;
  });
  </code></pre>