Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Everything I do ends up with the error: “[TypeError: Cannot read properties of undefined (reading ‘trim’)]”

I’m not using .trim() anywhere, what is going on? All I need is for console to get the input the user inputs in the textbox but all I get is this error, I’ve tried various different approaches to this and all of them give me the same “trim” error…

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" />
    <title>Palindrome Checker</title>
    <link href="styles.css" rel="stylesheet">
  </head>
  <body>
    <h1>Palindrome checker</h1>
    <div class="palindrome-checker-box">
      <div class="PCB-text">
        <h2>Enter a word and we will check if it is a palindrome!</h2>
      </div>
      <div class="text-input-div">
        <input id="text-input" placeholder="enter a word here!">
        <button id="check-btn" >Check!</button>
        <div id="result">
        </div>
      </div>
    </div>
  <script src="script.js"></script>
  </body>
</html>

/* file: styles.css */
html {
  background-color: blue;
}

h1{
  text-align: center;
  color: white;
}

.PCB-text{
  text-align: center;
  color: black;
  padding-top: 5px;
  
}
.palindrome-checker-box{
  background-color: white;
  width: 450px;
  height: 250px;
  border-radius: 25px;
  margin: 20px auto;
}

.text-input-div{
  height: 40px;
  width: 400px;
  text-align: center;
}

#text-input{
  border-bottom: purple 3px solid;
}

/* file: script.js */
//Step 1: Give the "Check!" button functionallity.

function checkButtonfunc() {
  const checkButton = document.getElementById('#check-btn'); //Setting the button to a variable. 

//trigger the check button and function that will put the input in the variable "userInput" by getting the .value of #text-input:

  checkButton.onclick = function(){
    let userInput; //Let since the variable's value will change when different inputs are inputted.

    userInput = document.getElementById('#text-input').value;

//check console has the correct value:
    console.log(userInput);
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

I copied all the code but I wasn’t able to replicate this.

I might be missing something but where does checkButtonfunc() get called?

3

So my logic was, 1) click a the button, 2) on click call the function and make it take the input text and put it in userInput. And from there, check if the input is “” or if it’s a string and from there go on.

Now that you mention it, in this case I didn’t call the function but I did try this before and wasn’t able to do anything I always get the same error… Might need to refresh the page? But it’s 3:36 am here I need some sleep. I’ll try again tomorrow

4

Basically good logic, but this onclick definition is inside this function checkButtonfunc()

checkButtonfunc() is never run and so checkButton.onclick = function() is never defined.

2 Likes
5

The test is most likely trying to trim some string so it can test it without caring about spaces (like trailing spaces or something like that). If it does not find the element, or get a string value to call trim on it will throw.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.