Help needed for my Palindrome Checker project

Hi everyone! I have just started learning JavaScript, and I am struggling mightily with the captioned project. The button doesn’t return anything with my code. Can anyone point out the issues? Thanks in advance!

const userInput = document.getElementFromId("text-input");
const checkButton = document.getElementFromId("check-btn");
const endResult = document.getElementFromId("outcome");

checkButton.addEventListener("click", () => {
  revisedInput = userInput.textContent.replace(/[\W_]/g,'').toLowerCase().split('');
  if(revisedInput.join('') === revisedInput.reverse().join('')) {
    endResult.textContent = `${userInput} is a palindrome.`;
  } else {
    endResult.textContent = `${userInput} is not a palindrome.`;
  }
})

Hello!

Do you mean getElementById()?

Change that, try again and keep us posted if you still need help!

1 Like

Hi Daniel! Thanks for spotting the silly typo.

However, the button still doesn’t work.

For your information, endResult corresponds to <p id="outcome"></p> in the html code, and it is styled by CSS to be a container that should show the result after clicking the button (since it is linked by .textContent).

Any idea on why it doesn’t work? Thanks~

Try value instead of textContent, that is what is usually used for input fields.

It’s a bit like fishing in the dark, always best and easier for us with code in CodePen or other online code editors. As a tip for the future.

Maybe we found the bug!

For a little more clarification on when to use value and when to use textContent when you need to gather data:

Use thevalue property of an element to gather the input/selection on interactable elements such as <input>, <textarea>, <select>, etc. These are elements where some interaction can take place such as characters entered into a box, selection on screen, clicking a checkbox/radio button, etc.

Use the textContent property of an element to gather the display text of display/non-interactable elements such as <p>, <div>, <main>, <span>, etc.

1 Like

Thank you guys for the advice! Unfortunately, the button is still not showing the end result of my code. My revised code is as follows:

const userInput = document.getElementById(“text-input”);
const checkButton = document.getElementById(“check-btn”);
const endResult = document.getElementById(“outcome”);

checkButton.addEventListener(“click”, () => {
revisedInput = userInput.value.replace(/[\W_]/g,‘’).toLowerCase().split(‘’);
if(revisedInput.join(‘’) === revisedInput.reverse().join(‘’)) {
endResult.textContent = ${userInput.value} is a palindrome.;
} else {
endResult.textContent = ${userInput.value} is not a palindrome.;
}
})

Where is the bug? :frowning:

P.S. I tried to run it elsewhere and it works, but not in freeCodeCamp. I wonder what the issue is…

1 Like

Hi again,

we need the complete code you have (HTML/CSS/JS) to test it,please.

The JavaScript is indeed running in my editor. The challenges are checked against a hard-coded set of rules and we need to be able see what it has a specific problem with.

The “get help”-option in the challenge shows you how to post the code blocks here.

1 Like

Here is the complete code. I am super confused as to why it won’t work in fCC, grateful for your help!

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="styles.css" rel="stylesheet">
    <title>Palindrome</title>
  </head>
  <body>
    <h1>Palindrome</h1>
    <div class="definition">
      <p class="question">What is a palindrome?</p>
      <br>
      <p class="answer">A <span class="highlight">palindrome</span> represents a word, phrase or sentence that can be read the same no matter forwards or backwards.<br>
<br>
Numbers can be included within the phrase or the sentence as well.<br>
<br>
Do note that it ignores case, spacing and punctuation.
    </div>
    <h3>Try to type in the box below to see if it is a palindrome!</h3>
    <div class="box">
      <input id="text-input" type="text">
      <button id="check-btn" type="button">Is it a palindrome?</button>
      <div id="result"></div>
    </div>
    <p class="ending">Now you know what a palindrome is.</p>
    <script src="script.js"></script>
  </body>
</html>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #1c5eeb;
  font-family: cambria,times-new-roman;
}

h1 {
  text-align: center;
  margin-top: 20px;
}

.definition {
  width: 50%;
  margin: 30px auto 20px;
  border: 2px solid black;
  padding: 5px;
  border-radius: 10px;
}

.question {
  font-weight: bold;
  margin: 5px 5px 0 5px;
  font-size: 20px;
}

.answer {
  margin: 0 5px 5px 5px;
}

.highlight {
  font-style: italic;
}

h3 {
  text-align: center;
  width: 70%;
  margin: 30px auto 20px;
}

.box {
  width: 80%;
  border: 2px solid black;
  margin: 0 auto 30px;
  height: 180px;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background-color: green;
}

#text-input {
  width: 80%;
  margin: 20px auto 5px;
  height: 40px;
  border-radius: 5px;
  font-size: 20px;
  padding-left: 5px;
  background-color: #90ee90;
  border-color: orange;
}

#check-btn {
  margin: 10px auto;
  width: 180px;
  height: 30px;
  padding: 3px;
  border-color: red;
  border-radius: 5px;
  background-color: yellow;
  font-weight: bold;
  font-family: calibri;
  border-style: dashed;
  cursor: pointer;
}

#result {
  width: 80%;
  height: 40px;
  border: 2px solid transparent;
  margin: 5px auto 0;
  padding-left: 5px;
  font-size: 25px;
}

.ending {
  text-align: center;
  width: 70%;
  margin: 30px auto 30px;
  font-style: italic;
  font-weight: bold;
}

JS:

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

checkButton.addEventListener("click", () => {
  revisedInput = userInput.value.replace(/[\W_]/g,'').toLowerCase().split('');
  if(revisedInput.join('') === revisedInput.reverse().join('')) {
    endResult.textContent = `${userInput.value} is a palindrome.`;
  } else {
    endResult.textContent = `${userInput.value} is not a palindrome.`;
  }
})

Thanks~

1 Like

Here’s my revision
As always just hints, writing the code yourself makes you the master (later).

const userInput = document.getElementById(“text-input”);
const checkButton = document.getElementById(“check-btn”);

const endResult = document.getElementById(“result”);
Maybe better select query the text and give endResult a default inner text (remember how it was done inthe roleplaying game lesson)?

checkButton.addEventListener(“click”, () => {
Don’t forget to check if the input field is empty and alert the user here!

(There is something missing here) revisedInput = userInput.value.replace(/[\W_]/g,‘’).toLowerCase().split(‘’);
You removed all non-alphanumeric characters, so splitting is maybe not necessary here?

if(revisedInput.join(‘’) === revisedInput.reverse().join(‘’)) {
For the reverse however you’ll need to split(), reverse() needs an array to work with before you join() everything. Better store the reversed text in a new variable and compare the two variables for the final result

endResult.textContent = ${userInput.value} is a palindrome.;
} else {
endResult.textContent = ${userInput.value} is not a palindrome.;
}
we found something better than “textContent” to append => check above
})

1 Like

Huge thanks to Daniel for spending the time to go through my code and providing hints on enhancing it!

It turned out that my original code didn’t work in freeCodeCamp because I didn’t declare my “revisedInput” variable. By adding const = in front of it, it finally worked.

I hope one day I can be as good as you guys in programming!:smile:

1 Like

Great it worked!

I noticed the missing variable declaration, should have tested this first.
That’s a reminder to debug the simple things before branching out :sweat_smile:.

1 Like