HTML submit onclick not firing in chrome extension

Question

I'm trying to get some simply things going but can't seem to get a JS function to run following a click event.

Relevant HTML and JS:

function addSite() {
  alert("DO SOMETHING");
}

<div id="whitelist" class="row-fluid">
  <div class="span12">
    <p>Enter the sites you use to work:</p>
    <form action="">
      <input class="input-mini" type="text" id="add-site" />
      <input type="submit" onclick="addSite" />
    </form>
    <p>Your Whitelist:</p>
    <div id="show-sites"></div>
  </div>
</div>

Full HTML and JS here and here.

Your other code uses javascript event handlers to assign click functions, why not do the same with this one. — James, Jul 17 '17 at 17:57
I added `addSite()` but it's still broken. I will look into the rest of the code for errors. — Sank Finatra, Jul 17 '17 at 18:10

score 0 · Answer 1 · answered Jul 17 '17 at 17:57

0

function addSite()
{
    alert("DO SOMETHING");
}

<div id="whitelist" class="row-fluid">
        <div class="span12">
            <p>Enter the sites you use to work:</p>
            <form action="">
                <input class="input-mini" type="text" id="add-site" />
                <input type="submit" onclick="addSite()" />
            </form>
            <p>Your Whitelist:</p>
            <div id="show-sites"></div>
        </div>
    </div>

you need to include the parenthesis when you call the function, which is missing in your html.

answered Jul 17 '17 at 17:57

sumit chauhan

1,185
1
11
18

I followed your suggestion but it still doesn't work...hmmm the rabbit hole goes deeper. I will look through the code more and report back. – Sank Finatra Jul 17 '17 at 18:09
3

Chrome extensions pages don't allow inline JavaScript. [onClick within Chrome Extension not working](//stackoverflow.com/a/13592045) – wOxxOm Jul 17 '17 at 18:22

vatz88 · Answer 2 · 2017-07-17T18:33:37.367

It should be

onclick="addSite()"

instead of

onclick="addSite"

EDIT:

As @wOxxOm pointed out, you should not use not onclick attribute to fire a event when working with chrome extension. Instead bind event listener to that particular DOM element using addEventListener.

function addSite() {
  alert("DO SOMETHING");
}

<div id="whitelist" class="row-fluid">
  <div class="span12">
    <p>Enter the sites you use to work:</p>
    <form>
      <input class="input-mini" type="text" id="add-site" />
      <input type="submit" onclick="addSite()" />
    </form>
    <p>Your Whitelist:</p>
    <div id="show-sites"></div>
  </div>
</div>

Since you have set action attribute to empty string, do read this:

In HTML5, you can actually specify an action on the submit button itself. If there isn't one, it uses the form's action and if that is not set, it defaults to the empty string (note you cannot explicitly set the action to an empty string in HTML5).

Ref.: Is action really required on forms?

I followed your suggestion but it still doesn't work...hmmm the rabbit hole goes deeper. I will look through the code more and report back — Sank Finatra, Jul 17 '17 at 18:10
Chrome extensions pages don't allow inline JavaScript. [onClick within Chrome Extension not working](//stackoverflow.com/a/13592045) — wOxxOm, Jul 17 '17 at 18:22

HTML submit onclick not firing in chrome extension

2 Answers2