How to solve an uncaught reference error in JavaScript in 2 minutes?
Tanu Nanda Prabhu
Technical Writer | Full-Stack Developer (Python, Django, React) | Former Assistant Manager at Excel Promotions | Educator & Content Strategist
I spent hours debugging this error
Introduction
Yesterday, I was building a web-based application to sort all my articles according to the predefined keywords. I know what you are thinking; I read your mind like always. JavaScript, HTML, and CSS right: I built this application with JavaScript, HTML, and CSS, plus a bit of Bootstrap. Everything was fine until I ran into a famous error Uncaught ReferenceError: categorizeArticle is not defined. Trust me, I am a great problem solver; this issue is common when using JavaScript modules. In this article, we will see how to solve this error using simple examples.
Why does this error occur?
I learned the hard way, by spending at least 3 hours on the internet reading! Later, I figured that in my code.
Example
Here is a simple HTML code:
All this code does is it creates a button on a webpage. Upon clicking the button, you will get a message on your console that says Article Categorized.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fixing Reference Error</title>
<script src="script.js" type="module"></script>
</head>
<body>
<button onclick="categorizeArticle()">Categorize</button>
</body>
</html>
Here is a simple JavaScript function inside a script.js file
function categorizeArticle() {
console.log("Article categorized!");
}
Output
When you click the button, you will see an error in your browser that says:
Uncaught ReferenceError: categorizeArticle is not defined
Before giving the solution, I want to ask my readers to give me an easy, simple, and effective solution in the comment section, if you have one.
How to fix it?
Global scope
Make the function globally accessible. Attach the function to the window object.
window.categorizeArticle = function() {
console.log("Article categorized!");
};
Event listeners
Don’t use onclick(), use addEventListener instead, here’s why
Updated HTML Code
<button id="categorizeBtn">Categorize</button>
Updated JavaScript Code
document.getElementById("categorizeBtn").addEventListener("click", function() {
console.log("Article categorized!");
});
Script loading at the right time
A quick hack, always place your script tag before the closing of the body tag. Here's how.
<body>
<button id="categorizeBtn">Categorize</button>
<script src="script.js" type="module"></script>
</body>
Alternatively, you can make sure that the script runs after the DOM is loaded. Here’s how.
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("categorizeBtn").addEventListener("click", function() {
console.log("Article categorized!");
});
});
Conclusion
Congratulations, you now know how to deal with reference error. Always remember to use window for global access, addEventListeners instead of onClick(), and place your script tag before the closing of the body tag. I hope you enjoyed reading my article. This solution is simple but effective. See you next time, happy coding.
Before you go