Palindrome Checker Project

I’m working on my palindrome checker project, and I’ve tested what code I know how to. I think I’m running into an issue with gathering the user input. I think it’s coming out as undefined, and I’m not sure what’s going on. I’m not sure how to add my code either. I’ve been trying to post a topic from the project page, but it keeps not posting. Please help!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>Palindrome Checker</title>
  </head>
  <body>
    <div>
      <form>
        <!-- 1 -->
        <input id="text-input" type="text"></input>
        <!-- 2 -->
        <br><button id="check-btn" type="submit">Check</button>
      </form>
    </div>
    <!-- 3 -->
    <div id="result"></div>
    <script src="./script.js"></script>
  </body>
</html>
const textInput = document.getElementById("text-input");
const checkButton = document.getElementById("check-btn");
const result = document.getElementById("result");
let userInput;


checkButton.addEventListener("click", () => {
  userInput = textInput.value;
// 4. When no value is entered...
  if (userInput == false) {
    alert("Please input a value");
  } 
// code to run when checking for palindrome
  else {
    const regex = /[^a-zA-Z0-9]/g;
    const stripped = userInput.replace(regex, "").toLowerCase();
    if (stripped === stripped.split.reverse.join) {
      result.innerText = `${userInput} is a palindrome`;
    } else {
      result.innerText = `${userInput} is not a palindrome`;
    }
    console.log(userInput.replace(regex, ""));
  }
}) 

I would copy and paste your code into this thread here.

I would love to, but not sure how. Is there a pinned post for that?

Have you never used copy and paste before? I would Google “how to copy-paste text”. (If that wasn’t what you meant, please clarify and I’ll try to answer!)

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like

you have an issue here

1 Like

Thanks! I already have some ideas.

I think I have sorted out the issue ilenia mentioned, but I’m getting undefined when I test my values, and not sure why.

What is your new code?

Whoops! I fixed stripped.split.reverse.join to stripped.split().reverse().join()

Please show all of the code

const textInput = document.getElementById("text-input");
const checkButton = document.getElementById("check-btn");
const result = document.getElementById("result");
let userInput;


checkButton.addEventListener("click", () => {
  userInput = textInput.value;
// 4. When no value is entered...
  if (userInput == false) {
    alert("Please input a value");
  } 
// code to run when checking for palindrome
  else {
    const regex = /[^a-zA-Z0-9]/g;
    const stripped = userInput.replace(regex, "").toLowerCase();
    if (stripped === stripped.split().reverse().join()) {
      result.innerText = `${userInput} is a palindrome`;
    } else {
      result.innerText = `${userInput} is not a palindrome`;
    }
    console.log(userInput.replace(regex, ""));
  }
}) 

I don’t think split works the way you want it to.

Same with join

I’ll check into that. I’m finding that it’s undefined even before that though.

What is undefined when? Where? I don’t see that when I run your code.

When I’m testing my code, I find that even my userInput variable is undefined.

How are you testing it? Step by step?

Your userInput variable should be undefined outside of your function at first. In fact, in should be moved to live only inside of your function.

I was using a console.log to check the values, but I’m not seeing the issue anymore. Yeah, I noticed that the value was undefined outside the function. Interesting observation. I appreciate your help. While I don’t have a working solution yet, I no longer feel stuck, so I’ll keep working on it on my own from here. Thanks! :slight_smile:

You’re really close if you look at how spilt and join work

I appreciate the encouragement! I feel like I’m close. :wink:

1 Like