JavaScript Build a Palindrome Checker Project

When I try clicking on the check button without entering a value, nothing shows up, when a message displaying “Please input a value” should show up. I tried many times, but I’m still getting nothing. I’d like to know what I’m missing.

Welcome to the FCC forum. Please post your code here, add three back ticks (```) in a separate line, above and below your code.

const button = document.getElementById("check-btn");
const result = document.getElementById("result");

function checkForPalindrome() {
  if (input.value === "") {
    alert("Please input a value");
  } else {
    if (input.value === "A") {
      result.innerHTML = `${input.value} is a palindrome`;
      return result;
    }
  }
}
button.addEventListener("click", checkForPalindrome());```

We will need to see your HTML too.

But at quick glance, you haven’t defined an input variable.

you reference it a few times here

and here

but nowhere in your code do you have an input variable.

so you will need to create that

also, you shouldn’t call this function here

instead, you need to pass it a reference to the function.
there are examples on how to do this at the end of the calorie counter project

once you fix those things, then your code should work as expected

Sorry, I accidentally missed some stuff. Here’s the JavaScript code:
const input = document.getElementById(“text-input”);
const button = document.getElementById(“check-btn”);
const result = document.getElementById(“result”);

function checkForPalindrome() {
if (input.value === “”) {
alert(“Please input a value”);
} else {
if (input.value === “A”) {
result.innerHTML = ${input.value} is a palindrome;
return result;
}
}
}
button.addEventListener(“click”, checkForPalindrome());

Here’s the HTML code:

Palindrome Checker

Is it a Palindrome?

Enter in text to check for a palindrome: Check

A palindrome is a word/sentence spelled both forward and backward the same way, regardless of spacing, punctuation and case.

Here’s my HTML:

Palindrome Checker

Is it a Palindrome?

Enter in text to check for a palindrome: Check

A palindrome is a word/sentence spelled both forward and backward the same way, regardless of spacing, punctuation and case.

paste your HTML ( or any code in general ) between backticks like this:

```
YOUR CODE HERE
```

Here’s my HTML code:

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Palindrome Checker</title>
    <link rel="stylesheet" href="./styles.css" />
    <script src="./script.js"></script>
  </head>
  <body>
    <main class="palindrome">
    <h1 class="title">Is it a Palindrome?</h1>
      <label for="text-input" value="" type="text" required>Enter in text to check for a palindrome:</label>
      <input id="text-input" value="" type="text"></input>
      <button id="check-btn">Check</button>
      <div class="results-div hidden" id="result"></div>
      <p>
        A <dfn>palindrome</dfn> is a word/sentence spelled both forward and backward the same way, regardless of spacing, punctuation and case.
      </p>
    </main>
  </body>
</html>```

You need to place your <script> tag at the end before your closing </body> tag.

So, it will be loaded and executed after your content of the page has been parsed and rendered by the browser.

If you placed it inside the <head> tag like your case here, it will be executed before rendering the content of your HTML.

It’s finally working

1 Like

Make sure to remove () after your function name checkForPalindrome.

If you placed () after any function name, you are executing this function.

Here, all you need is a reference to the function. You do this by passing its name only.

It’s working better, but when I try inputting anything else, I still don’t get the required output. I added some additional code, but I’d also like to know what I should do differently.

can you post your new code and what is your input that isn’t producing the required output ?


Don’t forget to enclose your code between backticks like you did above

const reverseInput = cleanInput.split("").reverse().join("");
if (cleanInput.value === reverseInput.value) {
  result = `${cleanInput.value} is a palindrome`;
} else {
  result = `${cleanInput.value} is not a palindrome`;
}
return result;```

Post your full code as I can’t find a variable called cleanInput in your previous post.

Here it is:

const button = document.getElementById("check-btn");
const result = document.getElementById("result");

function checkForPalindrome() {
  if (input.value === "") {
    alert("Please input a value");
  } else {
    if (input.value === "A") {
      result.innerHTML = `${input.value} is a palindrome`;
      return result;
    }
  }
  const cleanInput = input.replace(/[^a-zA-Z0-9]/g, "");
  const reverseInput = cleanInput.split("").reverse().join("");
  if (cleanInput.value === reverseInput.value) {
    result = `${cleanInput.value} is a palindrome`;
  } else {
    result = `${cleanInput.value} is not a palindrome`;
  }
  return result;
}
button.addEventListener("click", checkForPalindrome);```

There is no variable called input, you need to declare it like your button and result.
I will continue considering that you declared it named input


You can remove else and all code inside because you’re already checking for a palindrome below it. However, you will need to add return; after your alert() statement to stop the function.


You use .replace() method on strings and input is not a string. You have to use .replace() on its value. Like you did here: if (input.value === "")

And to check for a palindrome, you need to ensure that your cleanInput string is entirely either lowercase or uppercase, as mentioned in the definition.


You should modify its content like you did above in your code.
You can’t reassign it ( it’s a const ).

And in your message, you should use the original user input not your cleanInput.

Say for example, i entered “Hello” which isn’t a palindrome.
It should output “Hello is not a palindrome”.

The same goes here:


And you can remove your last return statement as it’s not needed.

Sorry, I forgot some of it. Here it is:

const input = document.getElementById("text-input");
const button = document.getElementById("check-btn");
const result = document.getElementById("result");

function checkForPalindrome() {
  if (input.value === "") {
    alert("Please input a value");
  } else {
    if (input.value === "A") {
      result.innerHTML = `${input.value} is a palindrome`;
      return result;
    }
  }
  const cleanInput = input.replace(/[^a-zA-Z0-9]/g, "");
  const reverseInput = cleanInput.split("").reverse().join("");
  if (cleanInput.value === reverseInput.value) {
    result = `${cleanInput.value} is a palindrome`;
  } else {
    result = `${cleanInput.value} is not a palindrome`;
  }
  return result;
}
button.addEventListener("click", checkForPalindrome);

Ok, you can ignore my first point above.

Why is my last return statement not needed?