Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

My result div is displaying ‘is not a palindrome’ before I enter anything. I think I have missed a step but I am unsure what this is.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Palindrome Checker</title>
  </head>
  <body>
    <input id="text-input"></input required>
    <button id="check-btn" type="submit" ></button>
    <div id="result"></div>
    <script src="./script.js"></script>
  </body>
</html>

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

buttonCheck.addEventListener("click", () => {
  if (inputText.value === "") {
    alert("Please input a value");
  };
});

const checkPalindrome = (str) => {
  const organise = str.replace(/[^0-9a-z]/gi, '').toLowerCase();
  return organise = organise.split("").reverse().join("");
}


if (checkPalindrome === inputText.value.toLowerCase()) {
  checkResult.textContent = `${inputText.value} is a palindrome`
} else {
  checkResult.textContent = `${inputText.value} is not a palindrome`
};

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Welcome to the forum @Tmoorin

The checkPalindrome function needs to run when the button is clicked.
At the moment it runs when the script is loaded.

Happy coding

1 Like
3

this code is outside any function, when do you think is run?

also, what do you think checkPalindrom like that does here?

1 Like
4

Hi, thanks for your reply. I think it will run when it is loaded as it is not attached to an event listener.

Should I instead have (organise === inputText.value.toLoweCase())? I am trying to compare the result of the checkPalindrome function to the input text value to check if it is the same and therefore a palindrome.

5

That makes sense thanks. When I add it to an event listener, it says checkPalinDrome is undefined.

buttonCheck.addEventListener(“click”, () => {
const checkPalindrome = (str) => {
const organise = str.replace(/[^0-9a-z]/gi, ‘’).toLowerCase();
return organise = organise.split(“”).reverse().join(“”);
}

});

6

and would you have a value to check at that point?

would organise be available there?

how do you get the value returned from a function? what does checkPalindrome returns?

does the function run then the button is clicked now? or is it only defined when the button is clicked, but not run?

7 
const inputText = document.getElementById("text-input");
const buttonCheck = document.getElementById("check-btn");
const checkResult = document.getElementById("result")

buttonCheck.addEventListener("click", () => {
  if (inputText.value === "") {
    alert("Please input a value")
    return;
  }

  const checkPalindrome = (str) => {
    const organise = str.replace(/[^A-Za-z0-9]/g, '').toLowerCase();
    return organise.split("").reverse().join("");
  }

  if (checkPalindrome(inputText.value)) {
    checkResult.textContent = `${inputText.value} is a palindrome`;
  } else {
    checkResult.textContent = `${inputText.value} is not a palindrome`;
  }
});

I have now placed everything in the event listener and I am getting a result but everything I enter says ’ x is a plaindrome’. For example ‘map is a palindrome’.

8

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 (').

9

Use console.log() at various places in your code to check the contents of variables to make sure they are what you think it should be

10

consider what is happening here. What is the output of checkPalindrome?