CODEWITHSUNDEEP
zurb-foundation
Hicksfeld
Hicksfeld

Reputation: 29

function from required JS file is not defined

I have this little function:

   function nullifyLorem(){
         document.getElementById("loremIpsum").innerHTML ="loremNullified"
   }

it is from the file "custom.js" which resides in root/assets/js/lib. This file is included via 

     require('./lib/custom');

inside the app.js file which resides in root/assets/js. The import of the custom.js works fine, I get no error about it.

Now I have this button on my landingpage 

<button class="button" onclick="nullifyLorem()">ClickMe!</button>

where I have this inclusion of script at the bottom of my body

<script src="{{root}}assets/js/app.js"></script>.

And when I click it, I get this error

Uncaught ReferenceError: nullifyLorem is not defined at HTMLButtonElement.onclick

Why is this? What am I missing? I read in several posts that this is the way to go when including own JS Files...

Upvotes: 0

Views: 32

Answers (1)

user753676
user753676

Reputation:

The onClick references a function name before it is available and in the wrong context (global / window). This does not work in general.

Use the unobtrusive way by using and attaching event listeners after your DOM elements are created.

Upvotes: 1

Related Questions