Can't read properties

JavaScript
1

Hello coders,
When I’m building the code I got this error.
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
Why did it happen? Could you please help me with solving the issue?
Best regards!

<input id="number"></input>
<button id="convert-btn">Click</button>
<
<p id="output"></p>

const input = document.getElementById("number");
const output = document.getElementById("output");
checkButton.addEventListener("click", () => {
  if (input == 0) {
    output.textContent = "Please enter a valid number";
  }})
2

where does checkButton come from? if it doesn’t exist you can’t use it

3

“Cannot read properties of null” means that you used dot notation on a variable, but that variable has the value null. The error is specifically telling you that you have .addEventListener on a null value. By looking at your code, we see that your code is checkButton.addEventListener, so now we know that checkButton is null so your next step in debugging is to figure out where checkButton should be getting a value and why it is null instead.

4

Sorry, here is the whole code

const checkButton = document.getElementById("check-btn");
const input = document.getElementById("number");
const output = document.getElementById("output");
checkButton.addEventListener("click", () => {
  if (input == 0) {
    output.textContent = "Please enter a valid number";
  }})
5 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css" /></head><body><input id="number"></input>
<button id="convert-btn">Click</button>

<p id="output"></p> <script src="script.js"></script></body></html>

const checkButton = document.getElementById("convert-btn");
const input = document.getElementById("number");
const output = document.getElementById("output");
checkButton.addEventListener("click", () => {
  if (input == 0) {
    output.textContent = "Please enter a valid number";
  }})```

Now it doesn't show the error, but it still doesn't work without showing the error in the console.
7

can you share the link to the project please?

also please remember that input elements are void elements, you do not need the closing tag

also please use conventional formatting for the html, it’s quite difficult to read (you can right click in the editor and use format)

8

I don’t know how to share the link of the project. All code is

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css" />
</head>

<body><input id="number">
  <button id="convert-btn">Click</button>

  <p id="output"></p>
  <script src="script.js"></script>
</body>

</html>

type or paste code here

const input = document.getElementById("number");
const output = document.getElementById("output");
checkButton.addEventListener("click", () => {
  if (input == 0) {
    output.textContent = "Please enter a valid number";
  }})
9

share the url to the page you are on

10
11

what error are you getting now?

12

It doesn’t proceed to the next step. I’m stuck in the fourth step.

13

what error are you getting? what is your code?

14

if it’s the last you posted

what is input and will it ever be equal to 0?

15

I would suggest adding a console.log here so you can see what type input is. that will help you better understand what is going on

const input = document.getElementById("number");
const output = document.getElementById("output");
const checkButton = document.getElementById("convert-btn")

checkButton.addEventListener("click", () => {
  console.log("this is typeof input:", typeof input)

  if (input == 0) {
    output.textContent = "Please enter a valid number";
  }
})

hope that helps

16

Elements are like objects, the values are properties on the object. Both attributes and content are properties (i.e. element.id or element.innerText).