Build a Palindrome Checker - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

At first, clicking on the button element with no text added to the input element, the alert would appear. But now, the button doesn’t even respond. Have I deleted something by accident?

Your code so far

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Palindrome Checker</title>
</head>

<body>
    <input id="text-input" placeholder="type here">
    <button id="check-btn">Check Palindrome</button>
    <p id="result"></p>
</body>

</html>

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

const regex = /\W/g

checker.addEventListener("click", () => {
  if (userInput.value === "") {
    alert("Please input a value");
  } 
  const cleanInput = userInput.toLowerCase().replace(regex, "");
  const reverseInput = cleanInput.split("").reverse().join("");

  if (cleanInput === reverseInput) {
    result = userInput.value + " is a palindrome";
  } else {
    result = userInput.value + " is not a palindrome";
  }
})
3

hello!

Have you solved it? If not, I would suggest that, if nothing at all is working then you should check if your JavaScript is connected to your HTML using a <script> tag.

4

Hello. Well, I feel dumb now, that’s what was missing all along.

However, the steps right after that all fail.

I’m not sure if I’m using the correct regex, but the rest of the logic I’m using should work as intended.

Edit: looks like the console returns “TypeError: userInput.toLowerCase is not a function”. This is not the first time that happens to me in practice.

5

Hi @MrToblerone ,

Can you say what is user_input? Look at where you are defining it.

You can check how your regular expression is working using this tool:
Regular Expression Tester

Happy coding!

6

Instead of defining userInput as a global variable, I’ve modified the event listener to allocate all four global variables inside it, and now the error disappears, but steps 5 and beyond are still a wash. resultText was read only, and that throws and error as well, so I’ve defined it with let instead.

document.getElementById("check-btn").addEventListener("click", () => {
  
  const userInput = document.getElementById("text-input");
  let resultText = document.getElementById("result");

  const regex = /\W/g
  
  if (userInput.value === "") {
    alert("Please input a value");
  } 

  const cleanInput = userInput.toString().toLowerCase().replace(regex, "");
  const reverseInput = cleanInput.split("").reverse().join("");

  if (cleanInput === reverseInput) {
    resultText = `${userInput.value} +  is a palindrome`;
  } else {
    resultText = `${userInput.value} +  is not a palindrome`;
  } 
})
7

That was not the issue. You still did not say what resultText is. Try logging it and look at what is showing in your browser’s console (not the fCC console).

8

I got it now! The regex was wrong, and using resultText in the last conditional was missing something too. I’ve made some more changes, but mentioning them will probably get my response deleted. Thank you.

9

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