WebGlow Knowledge Centre

Few things are more frustrating than writing JavaScript and seeing nothing happen.

No errors. No interaction. No console output. If your JavaScript isn’t working, there’s always a reason — usually small but critical. This guide walks through **12 real-world fixes** for common JS problems.

1️⃣ Script Placement

The Problem: Your <script> tag is in the head without defer. JS runs before DOM is loaded.

Fix #1: Move the script to the bottom of the body:

  Click Me
  

        

Fix #2: Use defer:

2️⃣ Wrong File Path

Make sure the src points to the correct file:

Tip: Check Network tab in DevTools for 404 errors.

3️⃣ Console Errors

Always check DevTools Console for errors like Uncaught TypeError or ReferenceError.

Uncaught TypeError: Cannot read properties of null
        

4️⃣ Misspelled IDs or Classes

HTML is case-sensitive on servers:

Submit
document.getElementById("submitbtn") // ❌ wrong
document.getElementById("submitBtn") // ✅ correct
        

5️⃣ Script Not Loaded

Check DevTools → Network tab. Look for 404s or MIME type errors.

6️⃣ Type="module" Misuse

Modules use strict mode automatically. Scoping differs. Declare variables carefully.

7️⃣ Event Listeners Not Firing

Wrap your code in DOMContentLoaded:

document.addEventListener("DOMContentLoaded", function() {
  document.querySelector(".btn").addEventListener("click", function() {
    alert("Clicked");
  });
});
        

8️⃣ Syntax Errors Stop Everything

function test() {
  console.log("Hello"
} // ❌ missing closing parenthesis
        

function test() {
  console.log("Hello");
} // ✅ fixed
        

9️⃣ Caching Issues

Force reload with Ctrl/Cmd + Shift + R or version your script:

10 Inline onclick Not Working

Instead of inline JS, attach events in JS:

document.getElementById("btn").addEventListener("click", runFunction);
        

11 Script Blocked by Browser

Check console for CSP, mixed content, or third-party blocking issues.

12 Editing the Wrong File

Always confirm the correct file is loaded in DevTools → Sources tab.

Debugging Tips

• Open DevTools Console
• Check Network Tab
• Add console.log() statements
• Confirm elements exist before manipulating
• Disable caching while testing

Full Working Example

HTML

JavaScript (app.js)

document.getElementById("btn").addEventListener("click", function() {
  alert("Button clicked!");
});
        

Download Templates

Test these fixes in our free HTML templates, structured for learning and real projects.

Download Free Templates