Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Hi Everyone! I was getting the following error in the console box, when I tried to add an event listener for the button:
“Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)”
This made me wonder, how come I have a “null” propery, as I am only accessing elements that I am directly getting by Id. I added the “console.log()” statements for debugging purposes, which confirmed that I am getting null both for button and input.

Then I double checked whether my HTML file is properly linked to JS, which seemed fine.

Ran the code snippet locally and it worked just fine, without any modifications.
Do you have any suggestions what might I be missing?

ps.: I excluded the run function to only focus on the relevant part of the code. I believe I would pass all the testcases of the challenge should I succeed in adding the event listener.

Thank you very much for your help in advance!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Palindrome checker</title>
    <script src="./script.js" defer></script>
  </head>
  <body>
    <input id="text-input" type="text" required>
    <button id="check-btn">Sumbit</button>
    <div id="result"></div>
  </body>
</html>

/* file: styles.css */


/* file: script.js */
const button = document.getElementById('check-btn');
const input = document.getElementById("text-input");
const result = document.getElementById("result");

console.log(button)
console.log(input)
console.log("hey")


button.addEventListener("click", run);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

I don’t think defer is going to work in the fCC editor. Move the script loading to after the HTML content.

   <!--  content -->
    <script src="./script.js"></script>
  </body>
3

Thank you very much, it worked! I was not aware of the importance of the placing of the script tag.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.