Uncaught ReferenceError: printProducts is not defined

Question

I keep getting this error when i inspected the element of my button. The button is suppose to give a print view to page.

HTML Code:

<button class = "hidden-print" onclick = "printProducts()">Print Products</button>

Javascript Code:

function printProducts(){
window.print();
}

Attached here is my code live in jsFiddle:

https://jsfiddle.net/PochMendoza/scj0q0dk/

You've a scope issue, `printProducts` is wrapped in onload function — Teemu, Apr 17 '16 at 07:53
It's not a duplicate. I've just given the jsFiddle to simulate the problem. Can't seem to get the solution. What am i missing? Is there anything i can do to make my button work? @Teemu — Pocholo Delenela Mendoza, Apr 17 '16 at 07:59
No? Your [code works as it is](https://jsfiddle.net/w3ddjk38/), when not wrapped in onload function. If you've this issue with your real code, then you've to provide the real code relevant to issue. — Teemu, Apr 17 '16 at 08:05
that is the code. when i execute the button it doesn't work. could you give me a JSFiddle link that shows that this kind of code works? @Teemu — Pocholo Delenela Mendoza, Apr 17 '16 at 08:10
@PocholoDelenelaMendoza I have added an answer that works with a link to JSFiddle — Matt C, Apr 17 '16 at 08:11
code still does not work when i apply the code to the web app. it does not show an error message when i inspect it, but the function still does not work. @Matthew Cliatt — Pocholo Delenela Mendoza, Apr 17 '16 at 08:23
@PocholoDelenelaMendoza I have added what you need to do to fix the code and make it work for your web app. Just look at my answer for the update — Matt C, Apr 17 '16 at 08:31

score 0 · Answer 1 · edited May 23 '17 at 10:28

"In JSFiddle, when you set the wrapping to "onLoad" or "onDomready", the functions you define are only defined inside that block, and cannot be accessed by outside event handlers."

Easiest fix is to change:

function something(...)

To:

window.something = function(...)

---Niet The Dark Absol

For your example, you want to define the onclick method of a button. That's really easy with JavaScript, we just need to give the button an id in the HTML, so that we can find it in our JavaScript code.

Change this:

<button class = "hidden-print" onclick = "printProducts()">Print Products</button>

To this:

<button id="myButton" class="hidden-print">Print Products</button>

Note that we no longer need the onclick="printProducts()" part anymore.

Now we need to set the printProducts function to run when the button is clicked. This can be done like so:

document.getElementById('myButton').onclick = printProducts;

Start edit This code needs to be placed in the onload function though, to properly run.
Do that like so:

window.onload = function() {
    document.getElementById('myButton').onclick = printProducts;
}

End edit

And the printProducts function remains the same.

Working JSFiddle

document.getElementById('myButton').onclick = printProducts;

function printProducts(){
 window.print();
}

<button id="myButton" class="hidden-print">Print Products</button>

Uncaught ReferenceError: printProducts is not defined

1 Answers1