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