How to log a message on call event in typescript only.

Your code is correct in logic, but a few common mistakes can cause it to “not work” in the browser.

1. Correct TypeScript Code (Counter.ts)

// Counter.ts

// Wait until the DOM is ready before trying to access elements
window.addEventListener("DOMContentLoaded", () => {
  const inc = document.getElementById("increment") as HTMLButtonElement | null;

  if (inc) {
    inc.addEventListener("click", test);
  }
});

function test(): void {
  console.log("Hello");
}

2. HTML File (index.html)

Make sure your compiled JavaScript file (usually Counter.js) is loaded properly in the HTML.

  
    
    
  
  
    Increment

    
    
  

3.Compile TypeScript to JavaScript

Run this in your terminal:

tsc Counter.ts

That generates Counter.js in the same folder.

If you use a TypeScript config file, you can run:

tsc --watch

to auto-compile on save.

4. Common Mistakes That Break It

// Wait for the DOM to load before querying
window.addEventListener("DOMContentLoaded", () => {
  const inc = document.getElementById("increment") as HTMLButtonElement | null;

  if (inc) {
    inc.addEventListener("click", () => {
      console.log("Hello");
    });
  } else {
    console.error("Button with id 'increment' not found");
  }
});