Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I keep coming across the error:

Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)

I’ve gone back n forth many times to see if I’ve made a typo of any sort, I’ve moved the code up and down on the chart to see if that plays a part, I’ve went and looked it up to see if there was something wrong with the code itself, and I can’t seem to find the problem.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <script src="script.js"></script>
    <title>Build a Palindrome CHecker Project</title>
  </head>
  <body>
    <div class=input>
      <p id="prompt">Enter Potential Palindrome</p>
    <input id="text-input" required/>
    <button id="check-btn">Check</button>
    </div>
    <div id="result">
    </div>

  </body>
  </html>

/* file: styles.css */
body {
  background-color: #594F3B;
  color: #ADB2D3;
  font-family: Helvetica;
  align-items: center;
}
.input {
  width: 300px;
  height: 100px;
  background-color: #896279;
  border-radius: 10px;

}


#check-btn {
  background-color: #ADB2D3;
  border-radius: 5px;
  border: none;
  color: #594F3B;
}

#check-btn:hover {
  background-color: #9C7CA5;
  color: #ADB2D3;
}

#result {
  width: 300px;
  height: 100px;
  background-color: #896279;
  border-radius: 10px;
  margin-top: 50px;
}

/* file: script.js */

const potPal = document.getElementById("#text-input")
const reverse = ''
const isPal = false
const check = document.getElementById("#check-btn")
const result = document.getElementById("#result")

const palindrome = () => {
  const potPal = /[\W_]/g
  const lowStr = str.toLowerCase().replace(potPal, '');
  const reverse = potPal.split('').reverse().join('')
  
  return reverse === potPal
}

if (palindrome) {
  const result = `${potPal} is a palindrome`
} else {
  const result = `${potPal} is not a Palindrome.`
}

check.addEventListener()

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

you should not put # before id name. document.getElementById() this selector already selects id so you do not have to put # before check-btn.

1 Like
3

this is executing before the html is loaded, put this just before the </body> closing tag. Normally you could use the defer attribute but that is not available in the freeCodeCamp editor

4

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