When working with JavaScript onclick event handler, encountering the error message “Function is not defined” can be confusing. This error typically occurs when attempting to call a function that either doesn’t exist or is not accessible within the current scope.
To resolve this issue, it is essential to verify the function’s name, ensure it is defined within the appropriate scope, and confirm that it is defined before it is called.
Here are a few steps you can take to troubleshoot and resolve the issue:
- Check the function name: Ensure that the function you’re trying to call actually exists and that you’ve spelled the name correctly. JavaScript is case-sensitive, so make sure the capitalization matches.
- Scope: Verify that the function is defined within the appropriate scope. If it’s defined within a different function or inside a block statement, it might not be accessible from where you’re trying to call it. Move the function to a higher scope or ensure that it’s defined in a way that allows it to be accessed from the current scope.
- Timing of function definition: Make sure the function is defined before it’s called. If you’re using an external JavaScript file, ensure that the file is loaded before the function is invoked. If the function is defined in the HTML file, place the function definition above the part of the code where it’s used.
- Separate JavaScript files: If your function is defined in a separate JavaScript file, double-check that the file is properly included in your HTML document. Verify the file path and ensure there are no errors in the file itself.
- HTML syntax: Confirm that the
onclickattribute is correctly specified in your HTML code. It should reference the function by name without parentheses or arguments, like this:onclick="myFunction()". - Check for other errors: Review your JavaScript console for any other errors that may be occurring before or during the execution of your function. Addressing those errors might resolve the “function is not defined” issue.
The function is not defined in JavaScript onclick example
Simple example code that demonstrates the “function is not defined” error with the onclick event handler in JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Function is not defined - Example</title>
<script>
function myFunction() {
alert("Button clicked!");
}
</script>
</head>
<body>
<button onclick="myFunction()">Click me</button>
<button onclick="anotherFunction()">Click me too</button>
</body>
</html>
Output:
Solution
<script>
function myFunction() {
alert("Button clicked!");
}
function anotherFunction() {
alert("Another button clicked!");
}
</script>Comment if you have any doubts or suggestions on this JS function topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version