TypeScript开发报错Uncaught TypeError: Cannot read property 'addEventListener' of null，请求排查原因与解决方法

Hey there, sorry you're stuck on this frustrating error—let's figure out what's going on and get your code working!

Why You're Seeing This Error #

The Uncaught TypeError: Cannot read property 'addEventListener' of null happens because your TypeScript (compiled to JavaScript) is running before your HTML elements are fully loaded.

Looking at your HTML, you've placed the <script src="app.js"></script> tag inside the <head> section. When the browser reaches this script, it immediately executes it—but the <form> and other elements in the <body> haven't been rendered yet. So document.querySelector('form') returns null, and trying to call addEventListener on null throws that error.

Fixes to Try #

You have a few straightforward ways to fix this:

1. Move the Script Tag to the End of the Body

This is the simplest solution for beginners. By placing your script right before the closing </body> tag, you ensure all DOM elements are loaded before the script runs:

<body>
 <form>
 <input type="text" name="name" id="name" />
 <input type="number" name="age" id="age" />
 <input type="submit" value="Say hi" />
 </form>
 <div class="greeting"></div>
 <!-- Move your script here -->
 <script src="app.js"></script>
</body>

2. Add the defer Attribute to the Script Tag

If you prefer keeping the script in the <head>, add the defer attribute. This tells the browser to download the script in the background but only execute it after the DOM is fully loaded:

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script src="app.js" defer></script> <!-- Add defer here -->
 <title>TypeScript Crash Course</title>
</head>

3. Wrap DOM Code in DOMContentLoaded Event Listener

You can also modify your TypeScript code to wait for the DOM to be ready before accessing elements. Wrap all your DOM-related code inside a DOMContentLoaded event handler:

//Interface
interface PersonObjInterface{
 name: string,
 age: number
}
//Interface for Obj
let objPerson: PersonObjInterface = {
 name: "John Doe",
 age: 40
}
//Interface for Class
class ClassPerson implements PersonObjInterface{
 constructor(public name: string, public age: number){}
 greet(){
 return `Hi, my name is ${this.name} and I am ${this.age} yo.`
 }
}

// Wait for DOM to load before accessing elements
document.addEventListener('DOMContentLoaded', () => {
 //DOM
 const inputName = document.querySelector('#name') as HTMLInputElement
 const inputAge = document.querySelector('#age') as HTMLInputElement
 const inputForm = document.querySelector('form')!
 const greeting = document.querySelector('.greeting') as HTMLDivElement

 inputForm.addEventListener('submit', (e) => {
  e.preventDefault()
  const person = new ClassPerson(inputName.value, inputAge.valueAsNumber)
  greeting.innerText = person.greet()
  inputForm.reset()
 })
})

Any of these methods will ensure your script can find the form element and attach the event listener without throwing an error. For a beginner, starting with option 1 is probably the easiest to understand and implement right away.

内容的提问来源于stack exchange，提问作者Everson Carvalho