Build a Palindrome Checker

JavaScript
1

I’ve not completed the code but i’m stuck.

**const userInput = document.getElementById("text-input");**

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

**const result = document.getElementById("result");**

const testForPalindrome = (userInput)  => {
if (userInput === ""){
  alert(`Enter Something!`);
  return;
}if (userInput === userInput.reverse()){

result = `${userInput} is a palindrome`
  return;
}else {
  result = `${userInput} is not a palindrome`
  return;

}}

 submitBtn.addEventListener("onclick", testForPalindrome)

Im not sure why but the first 3 values are returning null.

2

Welcome to the forum @hozcali964

So the forum can assist please also post your full html code.

Use the following method to post code to the forum:

  1. On a separate line type three back ticks.
  2. On a separate line paste your code.
  3. On the last line type three back ticks. Here is a single back tick `

You need a way to access the value of the variables.

Happy coding

3

you need to show your html for full debugging, but:

first the type of event should be click not onclick, then
here you call testForPalindrome, what the event listener pass as argument is the event itself, not the button

so then here

you are trying to compare an object event to a string, and all the other issues by consequence
note that if it is an html element, you still need to get the value of the element to be able to compare it to a string

1 Like
4 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Palindrome checker</title>
  </head>
  <link rel="stylesheet" href="styles.css" />
  <script src="script.js"></script>
  <body>
    <h1>Palindrome Checker</h1>

  <div  id= "result" class = "checker">
    <label for ="text-input">Enter Text</label>
    <input id = "text-input"></input>

    <button id = "check-btn" type = "submit" form = "text-input"> Submit</button>
    <div class = "result">
  
    </div>
  </div>
  <div id ="explanation">
      <h2>What is a palindrome?</h2>
 
 <p1>A palindrome is a word, number, phrase, or other sequence of symbols that reads the same backwards as forwards, such as madam or racecar</p1>


  </div>
  </body>
</html>
5

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
6

First thing, your script element needs to go before the closing body tag.
After the first quote mark of the src attribute add a dot then a back slash.

1 Like
7

this need to go before the closing </body> tag

1 Like