JSFiddle - React, Tailwind, and code Playground

by davehol

HTML

<div class="timetable aem-GridColumn aem-GridColumn--default--12">

  <div class="timetable--mobwrap hidden-lg hidden-md">
    <div class="timetable--container">

      <div class="ttmob-row">

        <div class="ttmob--date">
          <p>24&nbsp;November - 27 November&nbsp;</p>
          <p>Monday - Thursday</p>
        </div>

        <div class="ttmob--twocol">

          <div class="ttmom--leftcol">
            <strong>Time</strong>
          </div>
          <div class="ttmom--rightcol">
            <p>9am - 5pm</p>
          </div>


          <div class="ttmom--leftcol">
            <strong>Campus</strong>
          </div>
          <div class="ttmom--rightcol">
            <p>City</p>
          </div>


          <div class="ttmom--leftcol">
            <strong>Price</strong>
          </div>
          <div class="ttmom--rightcol">$1320</div>


          <div class="ttmom--leftcol">&nbsp;</div>
          <div class="ttmom--rightcol">
            <div class="btn_Wrap_Primary_tt">
              <a class="rmit_btnCta rmit_primaryBtn" data-analytics-offfer="484091" data-analytics-type="timetablelink"
                data-analytics-value="Enrol"
                href="/study-with-us/short-courses/register?courseid=s320001&amp;offeringId=484091">Enrol</a>
            </div>
          </div>


        </div>
      </div>

    </div>
  </div>
  <div class="cbs-course-table hidden-xs hidden-sm" role="table">

    <div class="cbs-table__row header">

      <div class="date"> Date</div>

      <div class="hours"> Time</div>

      <div class="campus">Campus</div>

      <div class="price">Price</div>
      <div class="enrol">&nbsp;</div>

    </div>


    <div class="desc-row">
      <div class="cbs-table__row even">

        <div class="date">
          <p>24&nbsp;November - 27 November&nbsp;</p>
          <p>Monday - Thursday</p>
        </div>


        <div class="hours">
         ...

JavaScript

/*
Adding an event listener to the enrol button to grab the price of the course and add it to local storage to make it available to the form which is then added to a hidden field to be included with the submitted record.
*/

(function () {
  //check for the presence of the enrol button(s)
  waitForElement(".timetable", main);

  //if found add a click event listener that when clicked gets and adds the price to local storage
  function main() {
    const elements = document.querySelectorAll('[data-analytics-type="timetablelink"]'); // Select elements with the class 'enrol-button'
    var price;
    elements.forEach((element) => {
      element.addEventListener("click", function () {
        if (this.parentNode.classList.contains("enrol")) {
          price = this.parentNode.parentNode.children[3].innerHTML; //remove the dollar sign from the value
        }else{
          price = this.parentNode.parentNode.parentNode.children[5].innerHTML; //remove the dollar sign from the value
        }
        localStorage.setItem("course_price", price.replace("$", "",));
        console.log(price.replace("$", "",));
      });
    });
  }
  function waitForElement(selector, callback) {
    let counter = 0;
    const intervalId = setInterval(() => {
      counter++;
      const element = document.querySelector(selector);
      if (element) {
        clearInterval(intervalId);
        callback(element);
      }
      if (counter > 50) {
        clearInterval(intervalId);
      } // element not found so abort
    }, 100); // Check every 100 milliseconds
  
})();