Tell us what’s happening:
I keep getting input.replace isn’t a method and i dont get why
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">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="base">
<form id="form">
<input id="text-input" placeholder="Put Possible Palindrome Here"><br>
<button type="submit" id="check-btn">Check</button>
<div id="result"> textOutput is not a palindrome. or is it you'll never know</div>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
let textInput = document.getElementById('text-input').textInner;
let result = document.getElementById('result')
console.log(result.textInner);
const button = document.getElementById('check-btn');
const regex = /[\s+-=_]/g;
button.addEventListener("click", palindromeChecker);
function palindromeChecker()
{
if (inputIterator(textInput)) {
result.textInner = `${textInput} is a palindrome`
} else {
result.textInner = `${textInput} is not a palindrome`
}
}
function inputIterator(input) {
input = document.getElementById('text-input');
let inputHolding = input.replace(regex,"");
let inputArray = [...inputHolding];
let inputHalf = Math.floor((inputArray.length / 2) - 1);
let isPalindrome = false
let j = (inputArray.length - 1);
if (inputHalf === 0)
{
inputHalf = 1;
}
for (i = 0;i >= inputHalf; i++){
if (inputArray[i] == inputArray[j])
{
isPalindrome = true
} else {
isPalindrome = false
i = inputArray.length + 1
}
j--;
}
j = 0;
return isPalindrome;
}
/* file: styles.css */
body {
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
background-image: linear-gradient(
to bottom right,
red,
blue,
green
);
}
#base {
padding: 12vh 2vw;
margin: 5vh 5vw 40vh 5vw ;
height: 40px;
width: 80vw;
background-image: radial-gradient(
#fff 5%,
#777);
}
#text-input {
position: relative;
left: 25vw;
width: 200px;
bottom: 18px;
}
#check-btn {
position: relative;
left: 29vw;
width: 150px;
bottom: 18px;
background-color: #beef;
}
#result {
text-align: center;
position: relative;
right: auto;
bottom: 18px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:133.0) Gecko/20100101 Firefox/133.0
Challenge Information:
Build a Palindrome Checker Project - Build a Palindrome Checker