Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.

for some reason when i try to link my button with .addEventListener() i keep getting the error: Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’).

Your code so far

<!-- file: index.html -->
<html lang="en">
  <header>
    <meta name="charset" href="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link name="stylesheet" href="styles.css" />
    <script src="script.js"></script>
    <title>palindrome</title>
  </header>
  <body>
    <div id="wrapper">
    <div id="header">
      <img src="https://upload.wikimedia.org/wikipedia/commons/3/39/FreeCodeCamp_logo.png" alt="freeCodeCamp_Logo" width="300vw" />
      <h1>Is it a palindrome?</h1>
    </div>
    <div id="checker-div">
      <blockquote id="palindrome-checker">
        <p>Enter in text to check for palindrome:</p>
        <input id="text-input" type="text" name="palidrome-input" required />
          <button id="check-btn" type="button">Check</button>
        <div id="result">
          <h3 id="palindrome">"ThisWordddd" is not a palindrome</h3>
        </div>
      </blockquote>
    </div>
    <div id="description">
      <blockquote>
        <p>
          💡 A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.
        </p>
      </blockquote>
    </div>
    </div>
  </body>
</html>

/* file: styles.css */
body {
  background-color: #0a0a22;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  margin: 0;
  font-family: sans-serif;
}

#wrapper  {
  width: 420px ;
}

#header * {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#palindrome-checker, #description  {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border-radius: 20px;
  margin: 20px 0;
}

blockquote *  {
  margin: 5px auto;
}

#palindrome-checker {
  background-color: #ffffff;
  color:  #0a0a22;
  padding: 20px;
}

h3  {
  font-size: 22px;
  padding-top: 10px;
}

#text-input {
  border: none;
  border-bottom: 2px rgb(212, 27, 212) solid;
  text-align: center;
  height: 28px;
}

#check-btn {
  margin-left: 10px;
  background-color: rgb(212, 27, 212);
  color: #ffffff;
  border-radius: 8px;
  width: 80px;
  height: 30px;
}

#description  {
  background-color: green;

}

h1  {
  font-size: 44px;
  text-align: center;
}

img {
  margin: auto auto -60px auto;
}

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

const checkForPalindrome = () => {
  const textInputValue = textInput.value;
  const cleanInputString = textInputValue.toLowerCase().replaceAll(/[^a-zA-Z0-9]/g, '');
  if (cleanInputString !== "")  {
    const inputArray = cleanInputString.split('');
    const reverseArray = [...inputArray].reverse();
    if (inputArray.join('') === reverseArray.join(''))  {
      return result.innerHTML = `<h3><b>${textInputValue}</b> is a palindrome</h3>`
    } else  {
      return result.innerHTML = `<h3><b>${textInputValue}</b> is not a palindrome</h3>`
    }
  } else {
    alert("Please input a value");
    return
  }
} 

checkButton.addEventListener("click", checkForPalindrome)

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

1 Like
3

found the solution… put my javascript script in html before the body element so it didn’t get the results from the html before reading the js script

4

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