Build a Palindrome Checker Project - Build a Palindrome Checker

Tell us what’s happening:

I’m having an issue getting my .toLowerCase() method to work. I keep getting this error.

Uncaught TypeError: str.toLowerCase is not a function

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>Build a Palindrome CHecker Project</title>
  </head>
  <body>
    <div class=input>
      <p id="prompt">Enter Potential Palindrome</p>
    <input id="text-input" required/>
    <button id="check-btn">Check</button>
    </div>
    <div id="result">
    </div>
    <script src="script.js"></script>
  </body>
  </html>
/* file: styles.css */
body {
  background-color: #594F3B;
  color: #ADB2D3;
  font-family: Helvetica;
  align-items: center;
}
.input {
  width: 300px;
  height: 100px;
  background-color: #896279;
  border-radius: 10px;

}


#check-btn {
  background-color: #ADB2D3;
  border-radius: 5px;
  border: none;
  color: #594F3B;
}

#check-btn:hover {
  background-color: #9C7CA5;
  color: #ADB2D3;
}

#result {
  width: 300px;
  height: 100px;
  background-color: #896279;
  border-radius: 10px;
  margin-top: 50px;
}
/* file: script.js */
const input = document.getElementById("text-input")
const reverse = ''
const isPal = false
const check = document.getElementById("check-btn")
const result = document.getElementById("result")


const palindrome = (str) => {
  if(input === '') {
    return
  }
  const re = /[\W_]/g
  const lowStr = str.toLowerCase().replace(re, '');
  const reverse = lowStr.split('').reverse().join('')
  
  return reverse === lowStr
}

if (palindrome) {
  const result = `${input} is a palindrome`
} else {
  const result = `${input} is not a Palindrome.`
}

check.addEventListener("click", () => {
  input.toString()
  if (input === '') {
    alert("Please input a value.")
  } else {
    palindrome(input)
  }
})


Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

str is not a string, because you call

and input is an html element

Hi @gabawo9881

I noticed the quote marks are missing from the class name.

Happy coding

1 Like

How would I make it a string then?

How do you retrieve the text from an html element?