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

admin管理员组

文章数量:1025499

I've moved my inline scripts to external pages to ply 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')
});

I've moved my inline scripts to external pages to ply 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')
});

• javascript
• onclick
• addeventlistener
• getelementbyid
• content-security-policy

Share Improve this question Follow edited Mar 1, 2018 at 22:24 Tim Han 16611 silver badge1212 bronze badges asked Mar 1, 2018 at 20:55 S. JonesS. Jones 8111 silver badge33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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')});

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();

I've moved my inline scripts to external pages to ply 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')
});

I've moved my inline scripts to external pages to ply 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')
});

• javascript
• onclick
• addeventlistener
• getelementbyid
• content-security-policy

Share Improve this question Follow edited Mar 1, 2018 at 22:24 Tim Han 16611 silver badge1212 bronze badges asked Mar 1, 2018 at 20:55 S. JonesS. Jones 8111 silver badge33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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')});

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();

本文标签： Need Help Moving Onclick Event To External Javascript To Comply With Content Security PolicyStack Overflow