Palindrome Checker - Trouble with inputting text to JS and outputting the results to be displayed in HTML

My JS logic for determining if the input is a palindrome passes the tests; however, I can’t get the result to output to the div container or log to the console. If I run my code in my browser, it will quickly flash the results before dissapearring.

<!-- file: index.html -->
<!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>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <form>
      <label for="text-input"
        >Enter text here: <input type="text" id="text-input"
      /></label>
      <button type="submit" id="check-btn">Check Text</button>
      <div id="result"></div>
    </form>
    <script src="./script.js"></script>
  </body>
</html>
/* file: styles.css */

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

checkBtn.addEventListener('click', () => {
    const text = input.value.trim();
    
    if (text.length < 1) {
        alert("Please input a value");
        return;
    }

    const regex = /[^a-zA-Z0-9]/g;
    const cleanText = text.replace(regex, "").toLowerCase();

    const isPalindrome = cleanText === cleanText.split("").reverse("").join("") ? true : false;

    const message = isPalindrome ? `${text} is a palindrome.` : `${text} is not a palindrome.`;

    result.innerText = message;
})

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

Your error may lie on this line:

Can you spot the error?

I’d be interested to know, once you got your code passed the fCC checks, if your use of form and a submit button impacts what you are seeing.

1 Like

Thank you. The results now display in the FCC text editor but I still can’t get them to persist in my browser.

That’s what it was. I simply removed the form element and now the results remain on the screen. I also removed the type=“submit” attribute from the button.

This is where I get tripped up - it’s not required to use the form element when gathering user input? Also, the issue with the results not displaying correctly was a result of my original code using the form element and not having <input type="submit"> ?

This was helpful if anyone gets the elements and confused like me. Thank you all! What is the difference between <button> and <input type="button"> - #3 by Myles2

I’m not an expert on html (I like the simplicity of backend JavaScript, especially in uses like Google apps script), but I’ve only ever seen forms used and type = submit when you want to send the data somewhere else via an http request.

1 Like