ReferenceError onclick JavaScript

Question

I am trying to run a function from script.js when a user clicks on a paragraph but it gives me ReferenceError: stockClicked is not defined.

My HTML is:

<p id="stock" onclick="stockClicked()"></p>
<script type="module" src="script.js"></script>

And the stockClicked() function is define in script.js:

function stockClicked() {
  console.log("here");
}

sorry, mistake from when I wrote the question, doesn't change anything — Tori Harris
– Tori Harris, Commented Jan 23, 2019 at 17:49
You are including the script after your HTML element that uses it. It either needs to be before, or modified so it attaches the event to the element after the DOM has completed loading. — user47589
– user47589, Commented Jan 23, 2019 at 17:50
How would you modify it so it attaches after the DOM has loaded? — Tori Harris
– Tori Harris, Commented Jan 23, 2019 at 17:51
document.getElementById('stock').addEventListener('click', stockClicked) — Sean_Codes
– Sean_Codes, Commented Jan 23, 2019 at 17:56

ethan.roday · Accepted Answer · 2019-01-23 17:58:00Z

3

When you reference a script with type="module", it gets loaded as an ES6 module, rather than in global scope. If you want stockClicked() to be available globally, just remove type="module" from the script tag.

If you really need to use type="module", then you have a couple of options:

Create a new inline module script tag that imports from script.js and assigns the stockClicked() function to the global scope explicitly, by saying window.stockClicked = stockClicked.
Add the click listener programmatically instead of in HTML. In other words, after the p tag, add an inline script that gets the element by id and adds a click listener. Something like this:

import {stockClicked} from './script.js';

document.getElementById("stock").addEventListener("click", stockClicked);

In both cases, you need to export the stockClicked() function from script.js. Also, it's recommended to name module files with .mjs instead of .js.

edited Jan 23, 2019 at 17:58

answered Jan 23, 2019 at 17:51

ethan.roday

2,6852 gold badges27 silver badges29 bronze badges

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

3 Comments

Tori Harris Over a year ago

I need the type=module because I'm importing a class into script.js and it won't work without it?

ethan.roday Over a year ago

Edited the answer to include a couple of options.

user47589 Over a year ago

This is a reasonable answer based on the code presented in the question.

d-h-e · Accepted Answer · 2019-01-23 17:58:06Z

2

If you need the type="module", then you have to bind the click event in the script itself

function stockClicked() {
  console.log('here');
}

document.getElementById('stock').addEventListener('click', stockClicked);

<p id="stock">click here</p>

answered Jan 23, 2019 at 17:58

d-h-e

2,5581 gold badge13 silver badges20 bronze badges

Collectives™ on Stack Overflow

ReferenceError onclick JavaScript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related