Using the same function with multiple buttons

Question

I have multiple buttons that should call the OpenPanel function but apparently chrome doesn't like it when I use inline event handlers. Are there any alternatives? Thanks!

Html:

<button id="showBg" class="panelB" onclick="OpenPanel(this)">Btn1</button>

<button id="showNews" class="panelB" onclick="OpenPanel(this)">Btn2</button>

JavaScript:

function OpenPanel(elem){
 alert (elem.id);
}

Chrome Error:

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

@user5014677 Yea, just did. Chrome still doesn't like it. Here is the error: Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. — Deathtitan77
– Deathtitan77, Commented Sep 28, 2017 at 6:20

Quentin · Accepted Answer · 2017-09-28 06:27:35Z

2

chrome doesn't like it when I use inline event handlers

Chrome has no problem with inline event handlers. The error message says that the problem is your Content Security Policy.

Either through HTTP headers or meta tags you have banned yourself from using inline event handlers.

This is probably for the best. Inline event handlers come with annoying gotchas.

Bind your event handlers with JavaScript instead.

function openPanelHanler(event) {
    OpenPanel(this);
}

var panels = document.querySelectorAll(".panelB");
for (var i = 0; i < panels.length; i++) {
    panels[i].addEventListener("click", openPanelHander);
}

answered Sep 28, 2017 at 6:27

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Deathtitan77 Over a year ago

Ah, thanks for clarifying. I am actually writing an extension, so maybe that's why?

A. Iglesias · Accepted Answer · 2017-09-28 06:31:50Z

0

With jquery you could use the class as a selector and a click function...

HTML:

<button id="showBg" class="panelB">Btn1</button>
<button id="showNews" class="panelB">Btn2</button>

JQUERY:

$('button.panelB').click(function() {
    alert($(this).attr('id'));
});

If for some reason you need to call your OpenPanel function, that is expecting a DOM element instead of a jQuery object...

function OpenPanel(elem) {
    alert(elem.id);
}

$('button.panelB').click(function() {
    OpenPanel(this);
});

I hope it helps

edited Sep 28, 2017 at 6:31

answered Sep 28, 2017 at 6:21

A. Iglesias

2,6752 gold badges12 silver badges24 bronze badges

3 Comments

A. Iglesias Over a year ago

Good to hear! Have a nice day and happy coding.

Quentin Over a year ago

What on earth is this for? $(this).get(0) You create a jQuery object with one element in it, and then you get the first element back out of it. That's exactly the same as just using this by itself in the first place!

A. Iglesias Over a year ago

@Quentin My fault... I wasn't sure if the this javascript dom element was assigned to the button dom element inside of the jquery event. Now I know it. Thanks!

user5014677 · Accepted Answer · 2017-09-28 06:23:19Z

0

You can still use:

$(".panelB").click(function(){
   {...}
});

$(this) contains the current element that's been clicked.

answered Sep 28, 2017 at 6:23

user5014677

6946 silver badges24 bronze badges

Collectives™ on Stack Overflow

Using the same function with multiple buttons

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related