Build a Palindrome Checker Project

JavaScript
1

When you click on the #check-btn element without entering a value into the #text-input element, an alert should appear with the text “Please input a value”.

I passed the test, but when I pressed “check”, even with or without textbox values, the result does not come up, and it keeps alerting “Please input a value”. I tried to debug through HTML but haven’t find anything wrong so far.

Any tips or advices are greatly appreciated.
Thanks in advance!

HTML

<!DOC TYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta width="device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <title>Palindrome Checker</title>
    </head>

    <body>

<h1 class="title">Palindrome Cheker</h1>

<div class="palindrome-div">
<input for="text" id="text-input" />


<button id="check-btn" type="button">Check</button>

</div>

<div id="result"></div>



<script src="script.js"></script>
</body>

</html>

js

const userInput = document.getElementById('text-input');

const checkButton = document.getElementById('check-btn');

const getResult = document.getElementById('result');

checkButton.addEventListener("click", function () {
  if (userInput.innerText === "") 

{
   alert("Please input a value") 
   } else {
     return;
   }
});

checkButton.addEventListener("click", function ()
{ if (userInput.innerText.includes("A") )
{getResult.innerText = "A is a palindrome"
} else {
  return;
}
});

Link to the Challenges:

2

you have two event listeners competing on the same checkButton element.
You need to create one listener, instead of two and make the code do everything inside that one listener.

Edit: also instead of checking the innerText of the input, you should be checking the value so you can grab the characters the person typed into the input.

And note that the for attribute you have defined on the input doesn’t make sense. The for attributes belong on label elements.

1 Like
3

Use console.log() statements to display variable values and check the flow of your logic during execution. This will help you identify where the code is going wrong.

1 Like
4

another problem here.
this should be <!DOCTYPE html>

1 Like
5

You’re currently using userInput.innerText to get the value from the input field, but you should use userInput.value for input elements.

1 Like
6

Here’s what I’ve left after my fix:

checkButton.addEventListener("click", function () {
  if (userInput.value === "")

{alert("Please input a value")}

 else if (userInput.innerText.includes("A"))


{getResult.value = "A is a palindrome"}
 
});


console.log();

What I think I need right now is how to tell JS to display the result message, however when I input these as part of the result for else if function, JS don’t recognise it. Any hints for where should I start looking?

getResult.value = getResult.innerText
7

You need innerText or innerHTML instead of value.

Have you thought about going to review the code in one of the older projects you did on fcc? That is one method you can use to remind yourself of different techniques.

You can also google some of these questions like “how do I update the text of a div in JavaScript” and this can also jog your memory.

1 Like
8

Also note that you are attempting to hard code one of the test cases here and that is the wrong way to solve this problem. You need to make the code work for anything a person types, not just the test cases. Try to think about that for a bit before trying to write the code. How do I figure out whether ANYTHING is a palindrome?

Edit: also less important but still something you need to know: you are using too many curly brackets. They should only be used with certain statements not to surround every other statement.

1 Like