Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I’m not getting any response from the check button when I click it. absolutely nothing. no errors, no console logs, no response nothing. What would cause this? is something wrong with the event listener? my function?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>Palindrone Checker</title>
  </head>
  <body>
    <input type="text" id="text-input" ><strong>Input</input>
    <button id="check-btn" ">Check</button>
    <div id="result">Results here.</div>


    
  </body>
</html>

/* file: styles.css */
body {
  background-color: #50b39a
}
#result {
  background-color: #c4dcb2;
  color: #ffffff;
  padding: 10px;
}
button {
  cursor: pointer;
  color: #0a0a23;
  background-color: #feac32;
  background-image: linear-gradient(#fecc4c, #ffac33);
  border: 3px solid #f0000;
}
text-input {
  color: #ffffff;
}

/* file: script.js */
const blahBlah= document.getElementById("text-input");
const checkButton = document.getElementById('#check-btn');
const resultOutput = document.getElementById("result");
let inputText = blahBlah.value;

checkButton.addEventListener("click", () => {
  if (inputText === "") {
    resultOutput.innerText = "Please input a value"
    console.log("Please input a value");
  } else {
    const cleanInput = inputText.toLowerCase.split("").replace(/[0-9a-zA-Z]/g, "")
    const testString = cleanInput.reverse();

    if (testString === cleanInput) {
      resultOutput.innerText = `${inputText} is a Palindrone`;
      console.log(`${inputText} is a Palindrone`);
    } else {
      resultOutput.innerText = `${inputText} is not a Palindrone`;
      console.log(`${inputText} is not a Palindrone`);
    }
  }
})

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Hello:)
HTML DOM Document getElementById() Method (w3schools.com)

<p id="para">Some text here</p>
const elem = document.getElementById("para");

You do not need this: #

4

I had already found that, i just copied from my backup. it’s corrected in codecamp, but still no output. thank you for taking a look though.

5

you don’t see

[TypeError: Cannot read properties of undefined (reading 'trim')]

?

6

does this value changes when you click the button?

7

i don’t have that variable in my code anymore. I don’t know how to update my code without making a new post, but i streamlined a couple things and that was one of them

8

make a new post in this topic with your updated code, you don’t have to keep the first post code updated

1 Like
9

Tell us what’s happening:

Updating my post bc I fixed a couple small errors, but nothing has changed- still getting nothing happen when I click the button. No result in the program, no output in the console, not even any error codes.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>Palindrone Checker</title>
  </head>
  <body>
    <input type="text" id="text-input" ><strong>Input</input>
    <button id="check-btn" ">Check</button>
    <div id="result">Results here.</div>


    
  </body>
</html>

/* file: styles.css */
body {
  background-color: #50b39a
}
#result {
  background-color: #c4dcb2;
  color: #ffffff;
  padding: 10px;
}
button {
  cursor: pointer;
  color: #0a0a23;
  background-color: #feac32;
  background-image: linear-gradient(#fecc4c, #ffac33);
  border: 3px solid #f0000;
}
text-input {
  color: #ffffff;
}

/* file: script.js */
const inputText = document.getElementById("text-input").value;
const checkButton = document.getElementById("check-btn");
const resultOutput = document.getElementById("result");


checkButton.addEventListener("click", () => {
  if (inputText === "") {
    resultOutput.innerText = "Please input a value"
    console.log("Please input a value");
  } else {
    const cleanInput = inputText.toLowerCase.split("").replace(/[0-9a-zA-Z]/g, "")
    const testString = cleanInput.reverse();

    if (testString === cleanInput) {
      resultOutput.innerText = `${inputText} is a Palindrone`;
      console.log(`${inputText} is a Palindrone`);
    } else {
      resultOutput.innerText = `${inputText} is not a Palindrone`;
      console.log(`${inputText} is not a Palindrone`);
    }
  }
})

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

10

done! you can delete this thread if that helps

11

i do not see that come up in the console, or in the instructions (where errors would come up during the lessons)

12

please do not create multiple topics, you should add your updated code in this topic

13

i’m sorry. thank you for merging

14

[TypeError: Cannot read properties of undefined (reading ‘trim’)]

I’m not seeing this anywhere. and not sure what ‘trim’ refers to? is that part of they styles?

15

trim is a method used to remove white spaces from beginning and end of a string, probably it is a method used by the tests, it appears in the console when running the tests

→ …an alert should appear…
you need a proper window

for all the others,
→ A is a palindrome

I don’t think it can ever match

16

why are you removing all the alphanumeric characters?

17

no, that’s missing the carat. my code includes the carat, so it should leave ONLY alphanumeric characters.

which lesson taught window alerts? I don’t remember learning about those. My console doesn’t give any errors, just that it doesn’t match the tests when i hit run tests.

18

Hi @blake833

First add a script element to you html file so the two are linked.
Then take a look at the console.

Happy coding

19

I can debug only what you give me, please provide your code…

below all the tests in the console I see that error

The Shopping Cart, the Calorie Counter, the Dice Game, the Decimal to Binary converter and the Spam filter use alert

20

i have a below the last div and above the /body tag. Is that not a good place for it?

21

i’ve been going in order, so i’ve only done the calorie counter, and i don’t think there’s any alerts in that one?