Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

My code doesn’t run when my button is clicked. Is it different in freeCodeCamp compared to vs code?

Your code so far

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Palindrome Checker</title>
</head>

<body>
    <input id="text-input">
    <button id="check-btn">Button</button>

    <br>

    <span id="result"></span>

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

</html>

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

function palindromeChecker(text) {
    filteredText = text.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
    console.log(text);
    console.log(filteredText);

    reversedText = filteredText.split("").reverse().join("");

    if (reversedText == filteredText) {
        result.innerText = `${text} is a palindrome`;
    } else {
        result.innerText = `${text} is not a palindrome`;
    }
}

button.addEventListener("click", function () {
    palindromeChecker(input.value);
});

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Hi there,

Here is how you’re gonna debug this:

Click on the Console button (next to the Preview button) to turn on the console.

Put some text in the input and click the button to run.

Now look at the console, there will be an error message. It’ll tell you what’s wrong.

Fix the bug (hint: it’s on line 7), then repeat the above step to continue debugging.