Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.
Hi, console says Uncaught TypeError: smt.replace is not a function, i dont understand it, what i am doing wrong in the replace method?
Plus, before this error my boton.addEventListener said it was undefined and didnt work didnt understand that too

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang ="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css"/>
    <title>Palindromo</title>
    </head>
    <body>
      <div id="container">
        <span><b>¿¿Is thaT A-.- pALindR0M3??</b></span>
        <input type="text" id="text-input"/>
         <button id="check-btn">Check</button>
           <div class="hidden" id="result">
             </div>
        </div>
        <script src="script.js"></script>
      </body>
  </html>

/* file: styles.css */
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body{
  background-color: #6420AA;
  display:flex;
  justify-content: center;
  align-items: center;
}
#container{
  width: min(100vw, 350px);
  min-height: 100px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 20px;
  margin: 10px ;
  background-color: violet;
}
#text-input{
  margin: 10px;

}
span{
  margin-bottom: 20px;
  padding: 17.2px;
}
#check-btn{
  border-radius: 10px;
  border: none;
  width: 50px;
  padding: 5px;
  background-color: cyan;
  color: black;
  cursor: pointer;
}
#hidden{
  display: none;
}
#result{
  overflow-y: auto;
    word-wrap: break-word;
    min-height: 50px;
    color: black;
}

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

/*Funciones*/

let esUnPalindromo =  smt => {
  const algoParaPoner = smt;
  
  if(algoParaPoner === ""){
    alert("Please input a value");
  }
  
  conclusion.replaceChildren();
  
  let regex = smt.replace(/[\W_]/g, "").toLowerCase();
  
  let mensaje = `<b>${algoParaPoner}</b> ${regex === [...regex].reverse().join("") ? 'is' : 'is not'} a palindrome.`;

  const respuesta = document.createElement('p');
  respuesta.className = texto;
  respuesta.innerHTML = mensaje;
  conclusion.appendChild("respuesta")

  conclusion.classList.remove('hidden');
}

boton.addEventListener("click", esUnPalindromo);

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 OPR/107.0.0.0

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

3

Are you sure the argument that get passed to esUnPalindromo is a string?

4

Thanks, this opened my eyes, i noticed too there was a typo on my appendChild (dont know if that helped too) :slight_smile:

5

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