onclick event not working in JavaScript Why?

Question

I have two radio buttons and I want to attach some functionality to them. But no matter how hard I try I can't attach anything to each of them. I tried to add a simple console log and it seems that the issue is the on click events do not work at all. the code is at the very end of the HTML code. What I'm missing and how to fix this...???

Here is the code: The Javascript is placed in a script tag at the end of the HTML code:

Note: I can log the radio buttons. as you see...

<!DOCTYPE html>
<!-- saved from url=(0043)http://thetheme.io/thesaas/demo/saas-2.html -->
<html lang="en">
   <head>
      <script
         src="https://code.jquery.com/jquery-3.5.1.min.js"
         integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
         crossorigin="anonymous"></script>
      <!-- Styles -->
      <link href="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/page.min.css" rel="stylesheet">
      <link href="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/style.css" rel="stylesheet">
   </head>
   <body>
      <!-- Main Content -->
      <main>
         <section id="section-pricing" class="section bg-gray">
            <div class="container pricing-plans-regular">
               <header class="section-header">
                  <h2>Affordable Pricing</h2>
                  <hr>
                  <p class="lead">TheSaaS for Teams is a single workspace for your small- to medium-sized company or team.</p>
               </header>
               <div class="text-center my-7">
                  <div class="btn-group btn-group-toggle" data-toggle="buttons">
                     <label class="btn btn-round btn-outline-dark w-150 active focus">
                     <input id="pricing-toggle--regular" type="radio" name="pricing" value="monthly" autocomplete="off" checked=""> Monthly
                     </label>
                     <label class="btn btn-round btn-outline-dark w-150">
                     <input id="pricing-toggle--professional" type="radio" name="pricing" value="yearly" autocomplete="off"> Yearly
                     </label>
                  </div>
               </div>
               <div class="row gap-y text-center">
                  <div class="col-md-4">
                     <div class="pricing-1 popular">
                        <p class="plan-name">Free</p>
                        <br>
                        <h2 class="price">free</h2>
                        <p class="small text-lighter">Forever!</p>
                        <div class="text-muted">
                           <small>Searchable messages up to 10K</small><br>
                           <small>10 apps or service integrations</small><br>
                           <small>5GB total file storage for the team</small><br>
                        </div>
                        <br>
                        <p class="text-center py-3">
                           <a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#">Get started</a>
                        </p>
                     </div>
                  </div>
                  <div class="col-md-4">
                     <div class="pricing-1 popular">
                        <p class="plan-name">Free</p>
                        <br>
                        <h2 class="price">free</h2>
                        <p class="small text-lighter">Forever!</p>
                        <div class="text-muted">
                           <small>Searchable messages up to 10K</small><br>
                           <small>10 apps or service integrations</small><br>
                           <small>5GB total file storage for the team</small><br>
                        </div>
                        <br>
                        <p class="text-center py-3">
                           <a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#">Get started</a>
                        </p>
                     </div>
                  </div>
                  <div class="col-md-4">
                     <div class="pricing-1 popular">
                        <p class="plan-name">Standard</p>
                        <br>
                        <h2 class="price text-success">
                           <span class="price-unit">$</span>
                           <span data-bind-radio="pricing" data-monthly="6.67" data-yearly="75">6.67</span>
                        </h2>
                        <p class="small text-lighter">
                           Per user/
                           <span data-bind-radio="pricing" data-monthly="month" data-yearly="year">month</span>
                        </p>
                        <div class="text-muted">
                           <small>Unlimited searchable message archives</small><br>
                           <small>Unlimited apps and service integrations</small><br>
                           <small>10GB file storage per team member</small><br>
                        </div>
                        <br>
                        <p class="text-center py-3">
                           <a class="btn btn-success" href="http://thetheme.io/thesaas/demo/saas-2.html#monthly" data-bind-href="pricing" data-monthly="#monthly" data-yearly="#yearly">Get started</a>
                        </p>
                     </div>
                  </div>
                  <div class="col-md-4">
                     <div class="pricing-1 popular">
                        <p class="plan-name">Plus</p>
                        <br>
                        <h2 class="price">
                           <span class="price-unit">$</span>
                           <span data-bind-radio="pricing" data-monthly="12.5" data-yearly="120">12.5</span>
                        </h2>
                        <p class="small text-lighter">
                           Per user/
                           <span data-bind-radio="pricing" data-monthly="month" data-yearly="year">month</span>
                        </p>
                        <div class="text-muted">
                           <small>Everything in Free &amp; Standard, and</small><br>
                           <small>SAML-based single sign-on (SSO)</small><br>
                           <small>Compliance Exports of all messages</small><br>
                        </div>
                        <br>
                        <p class="text-center py-3">
                           <a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#monthly" data-bind-href="pricing" data-monthly="#monthly" data-yearly="#yearly">Get started</a>
                        </p>
                     </div>
                  </div>
               </div>
            </div>
            <!-- Second one -->
            <div class="container pricing-plans-individual">
               <header class="section-header">
                  <h2>Affordable Pricing</h2>
                  <hr>
                  <p class="lead">TheSaaS for Teams is a single workspace for your small- to medium-sized company or team.</p>
               </header>
               <div class="text-center my-7">
                  <div class="btn-group btn-group-toggle" data-toggle="buttons">
                     <label class="btn btn-round btn-outline-dark w-150 active focus">
                     <input id="pricing-toggle--regular" class="switch-input" type="radio" name="plan" checked=""> Monthly
                     </label>
                     <label class="btn btn-round btn-outline-dark w-150">
                     <input id="pricing-toggle--professional" class="switch-input" type="radio" name="plan"> Yearly
                     </label>
                  </div>
               </div>
               <div class="row gap-y text-center">
                  <div class="col-md-4">
                     <div class="pricing-1 popular">
                        <p class="plan-name">Free</p>
                        <br>
                        <h2 class="price">free</h2>
                        <p class="small text-lighter">Forever!</p>
                        <div class="text-muted">
                           <small>Searchable messages up to 10K</small><br>
                           <small>10 apps or service integrations</small><br>
                           <small>5GB total file storage for the team</small><br>
                        </div>
                        <br>
                        <p class="text-center py-3">
                           <a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#">Get started</a>
                        </p>
                     </div>
                  </div>
                  <div class="col-md-4">
                     <div class="pricing-1 popular">
                        <p class="plan-name">Standard</p>
                        <br>
                        <h2 class="price text-success">
                           <span class="price-unit">$</span>
                           <span data-bind-radio="pricing" data-monthly="6.67" data-yearly="75">6.67</span>
                        </h2>
                        <p class="small text-lighter">
                           Per user/
                           <span data-bind-radio="pricing" data-monthly="month" data-yearly="year">month</span>
                        </p>
                        <div class="text-muted">
                           <small>Unlimited searchable message archives</small><br>
                           <small>Unlimited apps and service integrations</small><br>
                           <small>10GB file storage per team member</small><br>
                        </div>
                        <br>
                        <p class="text-center py-3">
                           <a class="btn btn-success" href="http://thetheme.io/thesaas/demo/saas-2.html#monthly" data-bind-href="pricing" data-monthly="#monthly" data-yearly="#yearly">Get started</a>
                        </p>
                     </div>
                  </div>
               </div>
            </div>
         </section>
      </main>
      <!-- Scripts -->
      <script src="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/page.min.js.download"></script>
      <!-- <script src="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/script.js.download"></script>
         -->
      <script type="text/javascript">
         document.querySelector(".pricing-plans-regular").setAttribute('style', 'display:none !important');
         
         const toggleRegular = document.querySelector("#pricing-toggle--regular");
         const toggleProfessional = document.querySelector("#pricing-toggle--professional");
         
         console.log(toggleRegular, toggleProfessional);
         
         
         
         toggleRegular.onclick = function() {
             console.log('toggleRegular')
         
         };
         
         
         toggleProfessional.onclick = function() {
             console.log('toggleProfessional')
         };
         
      </script>
   </body>
</html>

No... We should see `console.log('toggleRegular');` and `console.log('toggleProfessional');` — foxer, Jun 05 '20 at 17:03
Ahh... so you have more radio buttons over there, I see now. Than why you use duplicate IDs? — Roko C. Buljan, Jun 05 '20 at 17:04
You're using the same ID in two different places, so it's only attaching to the first one. — John Montgomery, Jun 05 '20 at 17:04
@foxer learn the difference between the meaning and use of ID selectors and Class selectors. — Roko C. Buljan, Jun 05 '20 at 17:05
Related: https://stackoverflow.com/questions/59887834/getting-the-value-of-the-input-field-using-jquery/59888053#59888053 — Taplar, Jun 05 '20 at 17:05

Roko C. Buljan · Answer 1 · 2020-06-05T17:13:19.820

You're using multiple ID instead of Class. IDs are meant to be unique.

Use class . selector
Use Element.querySelectorAll()

const toggleProfessional = document.querySelectorAll(".pricing-toggle--professional");
const togProf = (ev) => {
  console.log(`${ev.target.name} says: ${ev.target.value}`);
};

toggleProfessional.forEach(el => el.addEventListener("change", togProf));

<label><input type="radio" class="pricing-toggle--professional" name="aaa" value="1"> aaa 1</label>
<label><input type="radio" class="pricing-toggle--professional" name="aaa" value="2"> aaa 2</label>
<hr>
<label><input type="radio" class="pricing-toggle--professional" name="bbb" value="1"> bbb 1</label>
<label><input type="radio" class="pricing-toggle--professional" name="bbb" value="2"> bbb 2</label>

onclick event not working in JavaScript Why?

1 Answers1