Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

my input, button and paragraph elements are not recognized by their id in the tests nor in the js sheet

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Palindrome Checker</title>
    <link rel="stylesheet" type="text/css" href="./styles.css">
    </head>
    <body>
      <header>
        <h1 id="title">Christian's palindrome checker</h1>
        <h2>Type a word or sentence below and click the button to check if it is a palindrome.</h2>
      </header> 
      <form>
  <input type="text" id="text-input">
  <br />
  <button id="check-btn">Check!</button>
  <p id="result"></p>
  </form>
<script src="./script.js"></script>
      </body>

  </html>

/* file: styles.css */
html {
  font-size: 62.5%;
  font-family: sans-serif;
  text-align: center;
}

h1 {
  font-size: 4rem;
}

h2 {
  font-size: 2rem;
}



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

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

const resultText = document.getElementById("result")

checkButton.onClick = checkForPalindrome;

function isPalindrome() {
  resultText.innerText = `${userText} is a palindrome`
}

function notPalindrome () {
  resultText.innerText = `${userText} is not a palindrome`
}


function checkForPalindrome (textInput) {
  if (textInput === "" || textInput === null) {
    return alert("Please input a value")
  } else {
  const regex = /[^a-zA-Z0-9]/gi;
  const newText = textInput.toLowerCase.replace(regex, "");
  const newTextArray = newText.split("");
  if (newTextArray === newTextArray.reverse().join("")) {
    return isPalindrome(textInput)
  }  else {
    return notPalindrome(textInput)
  }}}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Safari/605.1.15

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Are there any errors shown in the console?

3

Also keep in mind that textInput is an element. Not a string. You need to grab the value of the element to do something useful with it.

4

Thanks for your response. The console shows no errors. I had been messing around with using .value but have added and removed so many things I just need to ask for help lol. I cannot figure out why my elements with the correct id do not register in the fCC tests, but I suspect that might be a part of why I cannot use the button to call a function

5

Use all lowercase onclick here

6

Thank you so much! Now I can actually use my button and figure out where else things are going wrong :rofl:

1 Like