View Single Post
  #1  
Old 01-30-2020, 04:12 PM
  The Knotty Celt's Avatar 
The Knotty Celt The Knotty Celt is offline
 

Member
  
Join Date: Jan 2020
Posts: 23
 

Default 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?
__________________
X-Cart version 5.4.1.29
PHP version 7.3.27
Reply With Quote