Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.

So far what has happened is that I’m trying to have within my Javascript the code for the function that will split the input string, delete non alphanumeric characters, and then check the reverse to see if it’s a palindrome. The error I keep having is that splitInput.replace is not a function and I’m just confused by that. If I find the solution elsewhere, I’ll update such here. Thank you so much in advance!

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, How Cool!</title>
    </head>

  <body>
    <h1 class="titleTotal">Palindrome Checker, How Cool!</h1>
    <div id="input-box">
      <input id="text-input" placeholder="You can put your word here!"></input>
    <button id="check-btn">Let's Check It!</button>
    </div>
    <div id="result"></div>
    
  </body>

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

/* file: styles.css */
*,
*::before,
*::after {
background-color: black;
border: white;
margin: 0;
padding: 0;
box-sizing: border-box;
text-shadow: 2px black;
color: white;


}

body {
  display: flex;
  justify-content: center;
  background-color: black;
  align-items: center;
  flex-direction: column;
  margin: 10px;
}

h1 {  background-color: black;
align-content: justify;

}

#text-input {
  background-color: white;
}

#check-btn {
  background-color: gold;
  color: black;
}


/* file: script.js */
const userTextInput = document.getElementById("text-input").value;

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

const result = document.getElementById("result");

function checker(str) {
  const splitInput = userTextInput?.split();
  const noJunkInput = splitInput?.replace(/[^0-9a-zA-Z_]/g, "");
  const output = noJunkInput?.join("");
  const reverseOutput = noJunkInput?.reverse().join("");

  if (output === reverseOutput) {
    result.innerHTML = `${userTextInput} is a palindrome`;
  } else {
    result.innerHTML = `${userTextInput} is not a palindrome`;
  }
}

function valid(str) {
  if (userTextInput === "") {
    alert("Please input a value");
  } else {
    checker(userTextInput);
  }
}



checkButton.addEventListener("click", checker);

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

3

What type is splitInput?

4

Absolutely. I apologize not messaging sooner. The issue that I’m having is initially within the “checker” function. In it, I’ve tried to split the string of the userTextInput so I could eventually replace any non-alphanumeric characters with empty strings. The consistent error I’ve had so far is that I’ve been told repeatedly the replace method isn’t a function, and my syntax is off for it. I believe I’m using the wrong method for the intended goal, but I’ve been struggling for it.

5

I’m a little confused by the question. My goal with it is just to split the string of the initial userTextInput constant. I believe I don’t have to split it since I can use the toString() method instead.

6

The original error about .replace not being a function is a little misleading. You were calling .replace on splitInput which came from using the .split function on your input. The split function returns an array and so splitInput is an array.

.replace is not a function for arrays, but for strings.

You might be right about using toString() therefore - give it a go and see what happens

7

Thank you so much for the quick reply! That makes sense now. I’ll try it out and if it works, I’ll put a hint here for how I got it. If I get stuck a few more hours I’ll comment another message here.

8

I got it! I was able to use the toString() method to properly make the input and then used the .match() method to pull the letters and numbers so the input could be reversed. After that, it wasn’t so bad!

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.