I'm having trouble with the Build a Palindrome Checker Project - Build a Palindrome Checker due to output not being detected by the testing program

Tell us what’s happening:

I keep failing the tests (except the first one, “…only contains the letter A”) due to the test program not being able to see my outputted text (which is what I’m assuming), eg. the “phrase” is/is not a palindrome. When I test it out on the preview window, the expected output does show up, so I’m confused as to what I’m doing wrong that the testing program cannot detect my output.

Your code so far

<!--HTML-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Palindrome checker</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://db.onlinewebfonts.com/c/117bd2ab8652c3570224d92ec0afe4f3?family=F8bitoperator+Regular" rel="stylesheet"> 
  </head>
  <body>
    <main class="container">
    <div class="background"></div>
    <div class="intro">
    <div class="tenor-gif-embed" data-postid="26771626" data-share-method="host" data-aspect-ratio="0.840625" data-width="10%"><a href="https://tenor.com/view/spamton-dance-dancing-scrunkly-deltarune-gif-26771626">Spamton Dance Sticker</a>from <a href="https://tenor.com/search/spamton-stickers">Spamton Stickers</a></div> <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
    <h1>SPAMTON'S PALINDROME CHECKER</h1>
    <div class="tenor-gif-embed" data-postid="26771626" data-share-method="host" data-aspect-ratio="0.840625" data-width="10%"><a href="https://tenor.com/view/spamton-dance-dancing-scrunkly-deltarune-gif-26771626">Spamton Dance Sticker</a>from <a href="https://tenor.com/search/spamton-stickers">Spamton Stickers</a></div> <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
    </div>
    <div class="container1">
    <label for="text-input" id="text-input-label">ENTER IN YOUR [[WORDS AND PHRASES]] TO SEE IF IT IS A PALINDROME!</label>
    <input id="text-input" class="veryoriginal" name="text-input" type="text" required />
    <button id="check-btn">CHECK IF YOU'VE GOT [[THE BIG ONE]]</button>
    <div id="result" class="results-div hidden"></div>
    </div>
  </main>
    <script src="./script.js"></script>
  </body>
</html>

<!--CSS-->
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h1 {
  padding: 10px 0;
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-align: center;
  color: white;
  text-shadow: 0 0 3px #000000, 0 0 5px #000000;
}
body {
  font-family: "F8bitoperator Regular";
}
.intro {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.container {
  width: 100%;
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.container1 {
  width: min(100vw, 450px);
  min-height: 100px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 20px;
  margin: 10px 0;
  background-color: white;
  box-shadow: 0 6px 6px #002ead;
  background-image: linear-gradient(to bottom right, pink, yellow);
}
label {
  color: #fff;
  text-shadow: 0 0 3px #000, 0 0 5px #000;
  margin-bottom: 20px;
}
.input[type="text"] {
  margin: 0 auto;
}
input {
  background-image: linear-gradient(to bottom right, red, #660000);
  padding: 20px;
  max-width: 75%;
  color: black;
  height: 30px;
  width: 250px;
  text-align: center;
  font-size: 1.2rem;
  margin: 10px;
  border: none;
  border-bottom: 2px solid #5a01a7;
  font-family: "F8bitoperator Regular"  
}
.veryoriginal::placeholder {
  text-align: center;
}
.results-div {
  overflow-y: auto;
  word-wrap: break-word;
  min-height: 50px;
  color: black;
}
button {
  display: block;
  width: 50%;
  margin: 1em auto;
  height: 2em;
  font-size: 0.75rem;
  background-color: pink;
  border-color: white;
  min-width: 300px;
  color: black;
  text-shadow: 0 0 3px #fff, 0 0 5px #fff;
  font-family: "F8bitoperator Regular";
  cursor: pointer;
}
.background {
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url("https://www.fangamer.eu/cdn/shop/products/product_deltarune_spamton_button-up_shirt_design.png?crop=center&height=1200&v=1650415160&width=1800");
  background-size: cover;
  background-position: center;
  filter:  blur(0.25rem);
  z-index: -1;
}
.hidden {
  display: none;
}

<!--JS-->
const maybePal = document.getElementById('text-input');
const checkPal = document.getElementById('check-btn');
const resultDiv = document.getElementById('result');
function checkPalindrome(input){
let palNoSpace = input.replace(/[^\w\s\']|_/g, "")
         .replace(/\s+/g, "");
palNoSpace = palNoSpace.toLowerCase();
let palRev = "";
let resultMsg = "";
console.log(palNoSpace);
  if (input === '') {
    alert('Please input a value');
    return;
  }
for(let i = palNoSpace.length; i>0; i--){
  palRev += palNoSpace.substring(i-1, i);
  console.log(palRev);
}
palRev = palRev.toLowerCase();
if(palRev === palNoSpace){
  resultMsg += input + " is a palindrome";
} else{
  resultMsg += input + " is not a palindrome";
}
  const pTag = document.createElement('p');
  pTag.className = 'user-input';
  pTag.innerHTML = resultMsg;
  resultDiv.appendChild(pTag);
resultDiv.classList.remove('hidden');
}
checkPal.addEventListener('click', () => {
  checkPalindrome(maybePal.value);
  maybePal.value = '';
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:122.0) Gecko/20100101 Firefox/122.0

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

I’m not sure if it impacts the results, but I’m curious why are you trying to set the value of the input box in your event listener?

I didn’t know where else to put it. I thought that since there were multiple tests, I needed to reassign a new value to the input box each time I wanted to test a new word.

Next I might remove the “hidden” functionality. Since this is an automated checker, I’m not sure that would show up to the bot checker.

That still didn’t fix it. Also, regarding the input box value setter, where would be a good place for me to assign it? By the way, I am getting the first test correct, where it says " When the #text-input element only contains the letter A and the #check-btn element is clicked, the #result element should contain the text A is a palindrome."

Alright, I seem to have figured it out on my own. Turns out the problem was that I was not removing the previous result after a new check has started using resultDiv.replaceChildren();. Thanks for your help, however.