JS Function not being called with onClick

Question

I am trying to call a function, let's say 'example()' in an external JS script.

Scripts/examplefile.js

  function example() {
        console.log('function called');
        // blah blah blah
    }
    console.log('JS file was run');

    <html>
        <head>
            <script src='Scripts/examplefile.js'></script>
        </head>
        <body>
            <button type='button' onClick='example()'>Click me</button>
        </body>
    </html>

The console does print 'JS file was run' but the button does nothing.

//EDIT// Solution: My actual JS function name was 'checkValidity' which isn't supported or is illegal. Not sure. I changed it to something else and it was working.

Problem recreated:

    <html>
        <head>
            <script>
                function checkValidity() {
                    console.log('function called');
                }
                console.log('jsok');
            </script>
        </head>
        <body>
            <button type='button' onClick='checkValidity()'>Click me</button>
        </body>
    </html>

just an advice to exclude a common pitfall - use absolute paths ! `src='/Scripts/examplefile.js'`` — john Smith, Oct 11 '18 at 12:24
Is it your full JS code? Because I think you may not have the example function defined globally — Juan Elfers, Oct 11 '18 at 12:24
That's ok! Take a look at the answer I provided and compare it with your actual code. I think you will find the error by yourself doing that. — Juan Elfers, Oct 11 '18 at 12:33
I just realised you've put `onClick` for your attribute name. Technically it should be `onclick` (all lowercase). I think most browsers are ok with both forms (as I said it's fine for me, on Chrome 69), but it's possible some browsers don't accept it? There's some discussion on this (old) question: https://stackoverflow.com/questions/4380719/onclick-or-onclick — Robin Zigmond, Oct 11 '18 at 12:36
@NiazM.Sameer View page source and click on the linked script to make sure it is loading. — Maihan Nijat, Oct 11 '18 at 12:37
@NiazM.Sameer paste the source of script here and what browser? — Maihan Nijat, Oct 11 '18 at 12:38
@MaihanNijat I went to the point where I replaced the whole function with just a console.log but the function is still not being called. — Niaz M. Sameer, Oct 11 '18 at 12:42
It's clear from all the comments and answers that don't work that something else is going on which you've not shared in the question. Perhaps there is some other element in the way so that,when you think you are clicking on the button, you're actually clicking on something else? — Robin Zigmond, Oct 11 '18 at 12:42
But really we're just guessing unless you share the whole code (HTML and JS, and perhaps CSS as well) — Robin Zigmond, Oct 11 '18 at 12:42
@RobinZigmond I replaced my actual function with just a console.log in it but that still doesn't do anything. — Niaz M. Sameer, Oct 11 '18 at 12:43
@NiazM.Sameer can you share the code in which the "function called" doesn't appear in the console? Because in the example you have here, it does. The first step in debugging is always to reproduce the bug :) — Robin Zigmond, Oct 11 '18 at 12:44
@RobinZigmond I figured it out. Turns out apparently and weirdly, I replaced my function name to 'test' on both the JS and the HTML. And it worked! I changed it back to 'checkValidity'. And it didn't work. Somehow. — Niaz M. Sameer, Oct 11 '18 at 12:46
ah thanks, it seems the renaming is significant because `checkValidity` is a native JS method - although it seems only on input elements. But it must apply to buttons to - if you change the `onclick` to `console.log(checkValidity())` then it outputs `true`. I also didn't know onclick attributes (and presumably other event-handing attributes) referred to methods on the element itself, or that this took priority over global functions of the same name - so I've learned something out of this too! :) — Robin Zigmond, Oct 11 '18 at 13:04

Mamun · Answer 1 · 2018-10-11T12:26:15.113

1

You have missed the closing ' in which makes the HTML invalid:

<script src='Scripts/examplefile.js></script>

function example() {
    console.log('function called');
    // blah blah blah
}
console.log('JS file was run');

<html>
    <head>
        <script src='Scripts/examplefile.js'></script>
    </head>
    <body>
        <button type='button' onClick='example()'>Click me</button>
    </body>
</html>

edited Oct 11 '18 at 12:26

answered Oct 11 '18 at 12:22

Mamun

66,969
9
47
59

1

That's just a typo in this question. I've triple checked all spellings and file paths. – Niaz M. Sameer Oct 11 '18 at 12:25
1

Yeah. It doesn't explain why the second console.log ran. – Andy Oct 11 '18 at 12:26
Dunno. Maybe change the HTML quotes to double quotes rather than single quotes: `type="button" onClick="example()"`. It's the only thing I can think of. – Andy Oct 11 '18 at 12:32
@Mamun No, no errors. Nothing comes up in the console when I click the button. – Niaz M. Sameer Oct 11 '18 at 12:33

score 0 · Answer 2 · answered Oct 11 '18 at 12:22

0

Try put your include script tag at the bottom of the page:

<html>
   <head>

   </head>
   <body>
      <button type='button' onClick='example()'>Click me</button>
      <script src='Scripts/examplefile.js></script>
   </body>
</html>

answered Oct 11 '18 at 12:22

blimes

69
9

Didn't work. JS file still running but function not being called. – Niaz M. Sameer Oct 11 '18 at 12:36
It won't make any difference. – Maihan Nijat Oct 11 '18 at 12:41
What append if you add ? – blimes Oct 11 '18 at 12:52
`onload` event only call when html loaded. But OP need click event on button. – Sudhir Ojha Oct 11 '18 at 12:54
I just think about onload to check if the scope of the function is right ad really loaded. – blimes Oct 11 '18 at 12:56

Juan Elfers · Answer 3 · 2018-10-11T12:35:58.007

I think you may have defined "example" inside another function, so you don't have it available in the global scope.

This code is just like what you provided and works great:

<html>
    <head>
      <script>
        function example() {
            console.log('function called');
            // blah blah blah
        }
        console.log('JS file was run');
      </script>
    </head>
    <body>
        <button type="button" onClick="example()"">Click me</button>
    </body>
</html>

You can also test it online with this pen: https://codepen.io/jmelfers/pen/bmRVVL?editors=1011

score 0 · Answer 4 · answered Mar 29 '20 at 12:01

0

Bit late to the party but for future searchers. The code is fine but I had the same issue.

When testing, see under sources (when inspecting elements) whether the script is actually there. Otherwise hard refresh until it is visible.

answered Mar 29 '20 at 12:01

Toasted Bread Guest

1
1

JS Function not being called with onClick

4 Answers4