Palindrome checker not passing

Hey all, I’ve been working on the palindrome checker and can’t get it to pass any of the automatic tests. I have seen a few other forum posts about this and have made sure my id’s are all what is expected as well as trying different #result elements. I saw one person having trouble with the submit button so removed it and the text input from a form element. I also tried to remove the section elements but no luck. here is my code:

<!doctypeHTML>
<html>
  <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">
  </head>
  <body>
    <section id="pld-checker">
        <h1>Is it a palindrome?</h1>
        <h2>?emordnilap a ti sI</h2>
        <p>A palindrome contains the same order of letters written backwards or forwards.</p>
      <p>Type your word in the text box below</p>
        <input id="text-input" type="text" placeholder="Please input a value" required>
        <button id="check-btn" type ="submit">Check</button>
      <div id="result">Racecar is a palindrome</div>
    </section>
    <script rel="script" src="script.js"></script>
  </body>
</html>
const submitBtn = document.getElementById("check-btn")
submitBtn.addEventListener("click",wordTest)

const inputWord = document.getElementById("text-input");
const output = document.getElementById("result");

function wordTest(){

  const userInput = inputWord.value
  if(userInput === ""){
    alert("Please input a value");
  }

  const filteredInput = userInput.match(/[a-zA-Z\d]+/);
  const forward = filteredInput.toString().toLowerCase();
  const backward = forward.split("").reverse().join("");
  
  if (forward === backward){
    output.textContent = `${userInput} is a plalindrome`;
  }else{
    output.textContent = `${userInput} is not a plalindrome`;
  }
}```

html{
font-family:Arial,sans-serif;
}
#pld-checker{
position:absolute;
top:40%;
left:50%;
transform: translate(-50%,-50%);
background-color:lightgray;
padding:20px;
text-align:center;
border-radius:10px;
width:500px;
}
h1{
font-family:Futura;
font-size:35px;
}
p{
background-color:white;
padding:10px;
}
#result{
margin:20px auto;
font-size:24px;
}

Hi, welcome to the forum! :wave:

Please provide a link to the challenge

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

Hey the link to the challenge is here:

Tell us what’s happening:

Hey all, I’ve been working on the palindrome checker and can’t get it to pass any of the automatic tests. I have seen a few other forum posts about this and have made sure my id’s are all what is expected as well as trying different #result elements. I saw one person having trouble with the submit button so removed it and the text input from a form element. I also tried to remove the section elements but no luck.

Your code so far

<!-- file: index.html -->
<!doctypeHTML>
<html>
  <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">
  </head>
  <body>
    <section id="pld-checker">
        <h1>Is it a palindrome?</h1>
        <h2>?emordnilap a ti sI</h2>
        <p>A palindrome contains the same order of letters written backwards or forwards.</p>
        <p>Type your word in the text box below</p>
        <input id="text-input" type="text" placeholder="Please input a value" required>
        <button id="check-btn" type ="submit">Check</button>
      <div id="result">Racecar is a palindrome</div>
    </section>
    <script rel="script" src="script.js"></script>
  </body>
</html>
/* file: script.js */
const submitBtn = document.getElementById("check-btn")
submitBtn.addEventListener("click",wordTest)

const inputWord = document.getElementById("text-input");
const output = document.getElementById("result");

function wordTest(){

  const userInput = inputWord.value
  if(userInput === ""){
    alert("Please input a value");
  }

  const filteredInput = userInput.match(/[a-zA-Z\d]+/);
  const forward = filteredInput.toString().toLowerCase();
  const backward = forward.split("").reverse().join("");
  
  if (forward === backward){
    output.textContent = `${userInput} is a plalindrome`;
  }else{
    output.textContent = `${userInput} is not a plalindrome`;
  }
}

/* file: styles.css */
html{
  font-family:Arial,sans-serif;
}

#pld-checker{
  position:absolute;
  top:40%;
  left:50%;
  transform: translate(-50%,-50%);
  background-color:lightgray;
  padding:20px;
  text-align:center;
  border-radius:10px;
  width:500px;
}

h1{
  font-family:Futura;
  font-size:35px;
}
p{
  background-color:white;
  padding:10px;
}
#result{
  margin:20px auto;
  font-size:24px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Safari/605.1.15

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

hi there, please don’t create a 2nd topic if you already have one about an issue. I’ve merged your duplicates into one.

I pasted just your index.html into the project and without any css or js it was able to pass the first 3 automatic tests.
When you try do you not even get the first three passing?

As this is a certificate project, you will have to ask specific questions to get help because we have to give targeted help only.

Hey Hanaa, sorry about the duplicate, i received a message on the first post asking me to use the get help button on the project page and thought I was being asked to do it again.

1 Like

On my end it passes the first three tests, it’s the tests based around the text input and the check button that fail. When I use the checker myself the with the examples provided I get the expected result, for example;

_eye should have a #result element with ‘_eye is a palindrome’

But the tests fail.

Yes I saw it. I appreciate that there was a misunderstanding.

I’m on my cell so I can’t check now but in the meantime, I would advise that you check the console as sometimes the messages there show us where we went wrong. Make sure all your variables are declared with const or let (otherwise the test will fail)

I found that you have a typo in the word palindrome (you wrote it as plalindrome)

(once I fixed it, many more tests passed)

edit: I also looked at the console and you have an error:
Uncaught TypeError: Cannot read properties of null (reading ‘toString’)

Thanks for the catch and your help. I’ll keep working on the rest.

1 Like