Palindrome checker

JavaScript
1

I have tried to figure out the first test regarding the text “A is a Palindrome”, but whenever I try to check for another text, the first test unclick and I can’t figure out why that happens

2 
const inputValue = document.getElementById("text-input")
const result = document.getElementById("result")
let value = ''
const checkBtn = document.getElementById("check-btn")
inputValue.onchange = (e) => { value = e.target.value }
checkBtn.onclick = () => {
 if (value) {
   const cleanValue = value.replace(/[^A-Za-z0-9]/g).toLowerCase()
   const reversedValue = cleanValue.split('').reverse().join('').toLowerCase()
   if(cleanValue === reversedValue){
     result.innerText = `${value} is a palindrome`
     console.log(cleanValue)
     console.log(reversedValue)
   } else{
     result.innerHTML = `${value} is not a palindrome`;
     console.log(cleanValue)
     console.log(reversedValue)
   }
 } else {
   alert("Please input a value")
 }
 document.getElementById("result").innerHTML = "A is a palindrome";
}
3

Please I need HELP to figure this out

4

Why are you doing this? Isn’t that going to set the result to the same string every time no matter what you type in?

1 Like
5

This isn’t going to work with the tests. Get rid of it completely. You should grab the value stored in inputValue when the user clicks the “Check for palindrome” button.

6

result.innerText = “A is a palindrome”
;

Can I use this instead?

7

I have removed this.

But I still cannot check for another text

8

Please post your updated JS.

1 Like
9 
const inputValue = document.getElementById("text-input")
const result = document.getElementById("result")
let value = ''
const checkBtn = document.getElementById("check-btn")
checkBtn.onclick = () => {
 if (value) {
   const cleanValue = value.replace(/[^A-Za-z0-9]/g).toLowerCase()
   const reversedValue = cleanValue.split('').reverse().join('').toLowerCase()
   if(cleanValue === reversedValue){
     result.innerText = `${value} is a palindrome`
     console.log(cleanValue)
     console.log(reversedValue)
   } else{
     result.innerHTML = `${value} is not a palindrome`;
     console.log(cleanValue)
     console.log(reversedValue)
   }
 } else {
   alert("Please input a value")
 }
 result.innerText = "A is a palindrome"
 ;

}
10

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
11

Why are you doing this?

I said in my previous comment:

“You should grab the value stored in inputValue when the user clicks the ‘Check for palindrome’ button.”

What do you think I mean by that?

12

Please what do you mean by this?

13

Can you please make it simpler to understand.

14

You need to get the current string typed in the input when the user clicks the button.

1 Like
15

I hope you will be patient with me.
I understand what you mean by current string, but I don’t understand the whole sentence.

Can you please give me an example

1 Like
16

At the beginning of your code you have the following:

let value = '';

Originally, you were updating the value variable using the change event:

inputValue.onchange = (e) => { value = e.target.value }

I told you that won’t work for the tests and you need to remove it, which you did. But you still need to update the value variable so that it has the current string typed into the input. You need to do this when the user clicks the button.

This is the first line of your click handler function:

if (value) {

The variable value needs to hold the current string that is typed into the text input by the time this line of code is executed.

17

I am new to coding , please be patient with me.

Do you mean this:

if ('value')
18

No, don’t change the if statement, it is fine. What is that if statement doing? It’s checking whether the variable value is truthy or falsey. So you need to make sure the value variable has the correct value in it so the check works properly.

It might help if you renamed the value variable to something a little more explicit so you understand exactly what your code is trying to do. What is the purpose of the value variable? What could you rename it to in order to make that clearer?

Also, look at what told you to remove earlier:

inputValue.onchange = (e) => { value = e.target.value }

Why did you have that code there in the first place?

19

Does Input or textInput work?

Honestly, I don’t know why I added this:

inputValue.onchange = (e) => { value = e.target.value }

It was included in someone’s code online, while I was trying to figure out the solution

20

Also, this is another type of solution for the palindrome checker I found online:

const txtInput = document.querySelector(".inputs input"),
 checkBtn = document.querySelector(".inputs button")
 infoTxt = document.querySelector(".info-txt")
 let filterInput;
 checkBtn.addEventListener("click", () => {
    let reverseInput = filterInput.split("").reverse().join("");
    console.log(reverseInput)
    if (filterInput != reverseInput) {
      return infoTxt.innerHTML = `No, <span>'${txtInput.value}'</span>is not a palindrome!`
    }
    infoTxt.innerHTML = `Yes, <span>'${txtInput.value}'</span>is a palindrome!`
 });

txtInput.addEventListener("keyup", () => {
    filterInput = txtInput.value.tolowercase().replace(/[^A-z0-9]/ig, "");
  if(filterInput) {
   return checkBtn.classList.add("active")
  }
  checkBtn.classList.remove("active")
});

I don’t know if this is the right way to go about it.