Build a Palindrome Checker Project - Build a Palindrome Checker

Tell us what’s happening:

Hello,
I’m unsure what’s wrong with my code. Whenever I click the “Check” button, nothing happens.

I’m also getting the code error:
[TypeError: Cannot read properties of undefined (reading ‘trim’)]

I’ve changed every part of the code, used trim, removed it, splitting the code into various functions. The issue is always the same…

This is the code I ended up with, I’m sure there are plenty of misses as I’ve changed it a dozen times.

Would appreciate any help!
Thanks!


### Your code so far


```html
<!-- file: index.html -->
<!DOCTYPE HTML><html lang="en">
 <head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="styles.css"/>
<title>Palindrome Checker</title>
   </head>
 <body>
<h1 id="title">Is it a Palindrome?</h1>
<fieldset id="checker">
<div id="checker-div">
  <p>Enter in text to check for a palindrome:</p>
  <input type="text-input" id="text-input"></input>
  <button id="check-btn">Check</button>
  </div>
<span id="result"> <div id="result"><p id="result"></p></div></span>
    </fieldset>
  <script src="./script.js"></script>
  </body>
  </html>
/* file: script.js */
const checkBtn = document.getElementById('check-btn');
const inputText = document.getElementById('text-input');
const result = document.getElementById('result')

checkBtn.addEventListener ("click", checkPal)

function palindrome (inputText){ const palText = /[\W_]/g;
const pal = inputText.trim().toLowerCase().replace(palText, '');
const reversePal = pal.split('').reverse('').join('');
const isPalindrome = pal === reversePal;
  return isPalindrome;;};
function checkPal (){
   if (inputText.value === null) {alert("Please input a value")}
   else
   {if (palindrome === true){
      result.style.display = "block";
      result.innerHTML = `${pal} is a palindrome`;
   
      }
      else if (palindrome === false ) {
   result.style.display = "block";
      result.innerHTML = `${pal} is not palindrome`;}}}
      
    
     
/* file: styles.css */

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

Try fixing the syntax errors in your html to see if that helps. Paste your code in this html validator and fix the errors

1 Like

Further to @hbar1st’s advice, there are also a few issues with your Javascript, not least the formatting.
I would first format your code so that it is more legible. You can do this manually or feed it into any online formatter.

Here are some of the issues which I spotted:

You can’t use null here: inputText.value === null. If there is no value supplied to the input element, it will be equivalent to an empty string, not a null value.

You have a syntax error (curly brace) in the code block below. You also have a surplus closing curly brace at the end of your code. Also, if you want to call the palindrome function, you need to include the function parentheses and supply an argument to the function inside them. Finally, you can’t access the variable pal in this scope as it is scoped to the palindrome function. You’ll need to refactor your code somehow so that you can return the required string.

else
   {if (palindrome === true){
      result.style.display = "block";
      result.innerHTML = `${pal} is a palindrome`;
   
      }

If you fix all of the above issues, I think your code may pass, though there may be other things I’ve overlooked.

2 Likes

Also watch out when you refer to functions. If you want to call them you need parentheses