Google Chrome doesn’t allow to write JavaScript in main HTML pages, so how can I use an `onclick` function with my button?

Question

How to code in such a way so when you click on the “Extract” button it will run the function DisplayRadioValue?

function displayRadioValue() {
  var str = $("#inputurl").val();
}

<button type="button" onclick="displayRadioValue()"> 
  Extract
</button>

I tried to use

document.getElementById("myButton").addEventListener("click", displayRadioValue)

But it dosen’t work. Using .addEventListener throws the following errors:

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
Uncaught TypeError: Cannot read property 'addEventListener' of null at popup.js:85

Overall, the file in Google Chrome is working but when I load the extension and try to run then it shows these errors.

Your button does not have the `myButton` ID. Also, [What Do You Mean “It Doesn’t Work”](https://meta.stackexchange.com/q/147616/289905)? Use the [browser console (dev tools)](https://webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. — Sebastian Simon, Aug 02 '20 at 20:59
in html you should do: `````` than in js: ```document.getElementById("myButton").addEventListener("click", myFunc);``` click will run function 'myFunc' — Will Black, Aug 02 '20 at 21:02

score 0 · Answer 1 · edited Aug 03 '20 at 07:09

0

If you are going to use jQuery, then you need to add jQuery script to the html. Also, you'll need some element with an id you are looking for that will take a value.

var button = document.getElementById('button');

button.addEventListener("click", displayRadioValue);

function displayRadioValue() {
  var str = $("#inputurl").val();
  console.log(str);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='button' type="button" > 
  Extract
</button>

<input id='inputurl' value='www.google.com'>

edited Aug 03 '20 at 07:09

marc_s

675,133
158
1,253
1,388

answered Aug 02 '20 at 21:06

DCR

10,658
7
38
86

if i run the file in google chrome it's working but when i load the extension and try to run then it shows the following errors " Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution." Uncaught TypeError: Cannot read property 'addEventListener' of null at popup.js:85 – Tsk Dynamo Aug 02 '20 at 21:17
ok, i've updated the snippet and removed the onclick event and added a listener instead. see if that works with the extension – DCR Aug 02 '20 at 21:27
im using jquery and tried your technique but still it give same error " Uncaught TypeError: Cannot read property 'addEventListener' of null at popup.js:89 " – Tsk Dynamo Aug 02 '20 at 21:33
if i do this code start to work due to "onclick" but no in extension side – Tsk Dynamo Aug 02 '20 at 21:39
what extension are you using? – DCR Aug 02 '20 at 21:39
it's a web scrapper extract data from the web – Tsk Dynamo Aug 02 '20 at 21:41
but which one? I'll need to load it to see what's going on – DCR Aug 02 '20 at 21:42
brother send me your email i will send you files and details – Tsk Dynamo Aug 02 '20 at 21:45

score 0 · Answer 2 · answered Aug 02 '20 at 21:17

if you not use jquery you can do it like this:

const displayRadioValue = () => {
  const value = document.querySelector("#inputurl").value;
  console.log(value);
}

document.getElementById("myButton").addEventListener("click", displayRadioValue);

<input id='inputurl' value='www.google.com' />
<button id="myButton">button</button>

Google Chrome doesn’t allow to write JavaScript in main HTML pages, so how can I use an `onclick` function with my button?

2 Answers2