X-Cart forums - onclick propery of button being scrubbed out.

I am trying to customize the design of my store. Specifically, I am trying to use a combination of styles, html, and script to change the way terms of use are displayed. Each section of the document is to be listed on a tab. Clicking that tab loads the relevant section. I have tested my styles, html, and script at w3schools.com, and everything works fine. Here is how I am trying to accomplish the task.

Custom CSS

Code:

/* Style the tab */



termtab {

  overflow: hidden;

  border: 1px solid #ccc;

  border-radius: 5px;

  background-color: #f1f1f1;



}





/* Style the buttons inside the tab */

.termtab button {

  background-color: #fff;

  border: 1px solid #044105;

  color: #044105;

  border-radius: 5px;

  float: left;

  border: none;

  outline: none;

  cursor: pointer;

  padding: 14px 16px;

  transition: 0.3s;

  font-size: 17px;

}



/* Change background color of buttons on hover */

.termtab button:hover {

  text-decoration: underline;

}



/* Create an active/current tablink class */

.termtab button.active {

  background-color: #044105;

  color: #fff;

}



/* Style the tab content */

.termtab-content {

  display: none;

  padding: 6px 12px;

  border: 1px solid #ccc;

  border-radius: 5px;

  border-top: none;

}

HTML

Code:

<div class="termtab">

  <button class="termtab-links" onclick="openSection(event, 'section1')">Section 1</button>

  <button class="termtab-links" onclick="openSection(event, 'section2')">Section 2</button>

...

...

  <button class="termtab-links" onclick="openSection(event, 'section17')">Section 17</button>

</div>





<div id="section1" class="termtab-content">

  <h2>Section 1 Title</h2>

  <p>Section 1 contents</p>

</div>





<div id="section2" class="termtab-content">

  <h2>Section 2 Title</h2>

  <p>Section 2 contents</p>

</div>





...

...





<div id="section17" class="termtab-content">

  <h2>Section 17 Title</h2>

  <p>Section 17 contents</p>

</div>

Script

Code:

function openSection(evt, sectName) {

  var i, tabcontent, tablinks;

  tabcontent = document.GetElementsByClassName("termtab-content");

  for (i = 0; i < tabcontent.length; i++) {



    tabcontent[i].style.display = "none";

  }

  tablinks = document.GetElementsByClassName("termtab-links");

  for (i=0; i < tablinks.legnth; i++ {

    tablinks[i].className = tablinks[i].className.replace(" active","");

  }

  document.GetElementById(sectName).style.display = "block";

  evt.currentTarget.className += " active";

}

In the BO, with the affected page loaded for editing at Content -> Pages -> [page], the onclick property of my button tags is scrubbed after saving the page. By scrubbed, I mean that after saving the page, when I return to edit the page script, this is what is displayed...

Code:

<button class="termtab-links">Section 1</button>

Why is the onclick property being dropped? Without being able to use this method for controlling button click events, how else am I to control the behaviour of the buttons?