Build a Palindrome Checker Project - Build a Palindrome Checker

Tell us what’s happening:

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">
     <meta charset="UTF-8"/>
       <meta name="viewpoint" content="width=device-width, initial-scale=1.0"/>
         <title>Palindome Checker
             <link href="styles.css" rel="stylesheet"/>
        <div class="title">
          <h1>Palindrome?   <h2>Or Palind-No?</h2></h1>
          <p>Enter and find out</p>
        <div class="enter">
          <input id="text-input" type="text" 
value=""        placeholder="enter your palindrome"/>
          <button id="check-btn">check</button>
      <div id="result" >
        </div>            </main>
   <script src="script.js"></script>                     </body>
/* 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/ Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

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

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.

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()?

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() {

checkBtn.addEventListener("click", palindrome);