Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I dont understand why none of the tests are passing. The alert and results dont show. There is clearly an error with my function code but I don’t know why.

Your code so far

/* file: script.js */
const input = document.getElementById("text-input");
const button = document.getElementById("check-btn");
const result = document.getElementById("result")

function checkForPalindrome() {
var lowerd = input.toLowerCase().replace(/[\W_]/g, "");
var pal = lowerd.split("").reverse().join("");

if(input === "") {
       alert("Please input a value")
   }
   if(lowerd === pal){ 
    return result.innerText = `${input} is a palindrome`
    }else{
    return result.innerText = `${input} is not a palindrome`
    }
};

button.addEventListener("click", checkForPalindrome);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:129.0) Gecko/20100101 Firefox/129.0

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

The first important thing to note is that input is a reference to an HTML element, not to the content of the element.

If you want to get the actual user input, you can use the value property (i.e. input.value).
So, amend your lowerd declaration accordingly. As an aside, the var keyword is essentially deprecated, so you should be using let or const instead.

Secondly, for the same reason as above, this conditional statement doesn’t work:

Finally, for the same reason, you’ll also need to amend your return strings:

I hope that helps!

3

This was helpful. Thank you for explaining step by step. However, after updating my code, it still doesnt pass. Did I miss something else?

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

function checkForPalindrome() {
const lowerd = input.value.toLowerCase().replace(/[\W_]/g, "");
const pal = lowerd.split("").reverse().join("");

if(input.value === "") {
       alert("Please input a value")
   }
   if(lowerd === pal){ 
    return result.innerText = `${input.value} is a palindrome`
    }else{
    return result.innerText = `${input.value} is not a palindrome`
    }
};

button.addEventListener("click", checkForPalindrome);
4

Your code looks fine to me… you might need to refresh the page and paste your code in again, to get it to pass.

Also, I’ve fixed your code for readability on the forum.
For future reference, if you want to post code directly on the forum, you should enclose it within two sets of triple backticks, so that it displays correctly.
You can do this manually or use the Preformatted Text tool (</> icon or CTRL+e) to create these for you automatically.

1 Like