CODEWITHSUNDEEP
javascriptonclickaddeventlistenergetelementbyidcontent-security-policy
S. Jones
S. Jones

Reputation: 81

Need Help Moving Onclick Event To External Javascript To Comply With Content Security Policy

I've moved my inline scripts to external pages to comply with Content Security Policy. This is the last CSP issue I need to resolve. I need help replacing "onclick" from two buttons with an event listener. I've researched thoroughly, but the examples differ enough from my code that I'm having difficulty figuring it out. I am very new to Javascript. I have two toggle tabs that reveal pricing when clicked. The first Tab is open by default when page loads. When I remove "onclick" from button and add the event listener to my JS file, the tabs will no longer open when clicked and the default open also does not work. I'm sure it's something simple, but I would appreciate assistance formatting the Javascript within my external page to make these toggle tabs work with CSP.

Here is my html: 

<div class="tab">
  <script type="text/javascript" src="/myExternalJavascript.js">
  </script>
  <button 
   class="tablinks"
   onclick="openTerms(event, 'Weekly')" 
   id="button1">Click This
  </button>
  <button 
   class="tablinks"
   onclick="openTerms(event, 'Monthly')" 
   id="button2">Click This
  </button>
</div>
<div id="Weekly" class="tabcontent">Do something great.</div>
<div id="Monthly" class="tabcontent">Do something great.</div>

Here is what's inside my external js file (using javascript from w3 tabs):

// Get the element with id="button1" and click on it
document.getElementById("button1").click();

function openTerms(evt, priceTerms){
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++){
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++){
    tablinks[i].className = tablinks[i].className.replace(" active","");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(priceTerms).style.display = "block";
  evt.currentTarget.className += " active";
}

document.getElementById("button1").addEventListener('click', function(){
  openTerms(event, 'Weekly')
});
document.getElementById("button2").addEventListener('click', function(){
  openTerms(event, 'Monthly')
});

Upvotes: 6

Views: 2804

Answers (2)

S. Jones
S. Jones

Reputation: 81

Placing the following at the very bottom of the external sheet solved the issue and button1's content now displays on page load:

document.getElementById("button1").click();

Placement within the external sheet seemed to be the issue. The following placement solved the problem.

var btn1 = document.getElementById("button1");
var btn2 = document.getElementById("button2");
btn1.addEventListener("click", function(){openTerms(event, 'Weekly')});
btn2.addEventListener("click", function(){openTerms(event, 'Monthly')});
document.getElementById("button1").click();

Upvotes: 2

Scott Marcus
Scott Marcus

Reputation: 65806

Move your script reference to just before the close of the body element so that by the time your script attempts to search through the document for elements, all the elements have been parsed into memory.

That should solve your issue so that, this:

<button class="tablinks" onclick="openTerms(event, 'Weekly')" 
id="button1">Click This</button>
<button class="tablinks" onclick="openTerms(event, 'Monthly')" 
id="button2">Click This</button>

Gets the onclick="...." part removed and in your JavaScript, and then you add:

var btn1 = document.getElementById("button1");
var btn2 = document.getElementById("button2");
btn1.addEventListener("click", function(){openTerms(event, 'Weekly')});
btn2.addEventListener("click", function(){openTerms(event, 'Monthly')});

Upvotes: 3

Related Questions