Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Hi,
My code isnt working and I’m completely stuck on where the issue is! Any help would be greatly appreciated

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
 <html lang-"en">
   <head>
     <meta charset="UTF-8"/>
       <meta name="viewpoint" content="width=device-width, initial-scale=1.0"/>
         <title>Palindome Checker
           </title>
             <link href="styles.css" rel="stylesheet"/>
               </head>
    <body>
      <main>
        <div class="title">
          <h1>Palindrome?   <h2>Or Palind-No?</h2></h1>
          <p>Enter and find out</p>
             </div>
        <div class="enter">
          <input id="text-input" type="text" 
value=""        placeholder="enter your palindrome"/>
          <button id="check-btn">check</button>
          </div>
      <div id="result" >
        </div>            </main>
   <script src="script.js"></script>                     </body>
                          </html>

/* file: styles.css */
body {background-color: navy;
color: white;
text-align: center;}
h1 {font-size: 35px;
padding: 0;
margin: 0;}
h2 {font-size: 25px;
padding: 0;
margin: 0;}
input {background-color: #a5d0e0;}
button {background-color: #b61c0d;}


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

function palindrome(str) {
  if (str === "") {alert("Please input a value");
  }
const regex = /[a-zA-Z0-9]/g;
const string = str.match(regex).join("").toLowerCase();
const reverse = string.split("").reverse("").join("");
if (string === reverse) {
  result.innerText = `${str} is a palindrome`;
} else {result.innerText = `${str} is not a palindrome`;}};


checkBtn.addEventListener("click", palindrome(textInput.value));

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

What error are you getting? Please show the relevant output for the error as well

3

When you click on the #check-btn element without entering a value into the #text-input element, an alert should appear with the text "Please input a value".

When I load your code the popup appears right away, before clicking anything, but when I click the button nothing happens.

4

Yeah that’s the issue I was happening but I’m not sure how to fix it?
It appears nothing happens when I click the button despite adding the addListenerEvent()?

5 
checkBtn.addEventListener("click", palindrome(textInput.value));

You are calling the handler callback function, you shouldn’t do that.

Inside palindrome you have access to textInput.value so there is no reason to pass it as an argument.

function palindrome() {
  console.log(textInput.value)
}

checkBtn.addEventListener("click", palindrome);
6

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