Problem with palindrome checker

please help i’m stuck :upside_down_face:
I can’t pass the simplest test, although i’ve tested the function and it worked!
this my code

Please share your code as text, link to the challenge in question and examples of tests that don’t pass. Otherwise it can be very hard to help.

I’ve had an issue like that recently, my issue was that the script.js wasn’t linked in the index.html file.

this is the project link
my script.js code :

const inputValue = document.getElementById("text-input")
const result = document.getElementById("result")
let value = ''
const checkBtn = document.getElementById("check-btn")
inputValue.onchange = (e) => { value = e.target.value }
checkBtn.onclick = () => {
 if (value) {
   const cleanValue = value.replace(/[\$\*\.','\s\-\_]/g,'').toLowerCase()
   const reversedValue = cleanValue.split('').reverse().join('').toLowerCase()
   if(cleanValue === reversedValue){
     result.innerText = `${value} is a palindrome`
     console.log(cleanValue)
     console.log(reversedValue)
   } else{
     result.innerHTML = `${value} is not a palindrome`;
     console.log(cleanValue)
     console.log(reversedValue)
   }
 } else {
   alert("Please input a value")
 }
}

although i’ve tried it, and it worked
image

the first 4 tests are passed, but the rest of them are not:

Passed:You should have an input element with an id of text-input.
Passed:You should have a button element with an id of check-btn.
Passed:You should have a div element with an id of result.
Passed: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.
Failed: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.
Failed:When the #text-input element contains the text eye and the #check-btn element is clicked, the #result element should contain the text eye is a palindrome.
Failed:When the #text-input element contains the text _eye and the #check-btn element is clicked, the #result element should contain the text _eye is a palindrome.
and so on…

What about your html and css? :slight_smile: It’s required to fully reproduce how it works.

<!Doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="./styles.css" />

</head>

<body>
  <img class="freecodecamp-logo" src="https://user-images.githubusercontent.com/20648924/133188813-5cceb6b3-a610-444c-b44c-4061bfc5b5c5.png" alt="freeCodeCamp Logo">
  <h1>Is it a Palindrome?</h1>
  <div class="container">
    <label for="text-input">Enter in text to check for a palindrome:</label>
    <div class='form'>
    <input type="text" id="text-input"/>
    <button type="button" id="check-btn">check</button>
    </div>
    <div id="result"></div>
  </div>
<div class='hint'>
  Hint: A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.
</div>
<script src='./script.js'></script>
</body>

</html>
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  padding:10px;
    background-color: #0a0a23;
    color: #ffffff;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.freecodecamp-logo{
height:120px;

}
.container{
  margin-top:35px;
  background-color : white;
  color:black;
  border-radius:10px;
  padding:25px 50px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.form{
  display:flex;
  align-items:center;
  gap:20px;
}
.form button{
  background-color: #5a01a7;
  color:white;
  padding:5px 20px;
  border-radius:10px

}
.form input{
  outline:none;
  border:none;
  border-bottom: 2px solid #5a01a7
}
.hint{
  width:60%;
  padding:10px;
}

Hm, so it seems that test is changing the input text in a way, that doesn’t trigger your onchange event on the input element.

so what should i do?

One option is defining value inside of the onclick on the checkBtn - when button is clicked read the value from the inputValue.

1 Like

thanks a lot, it worked :smiling_face_with_three_hearts:

1 Like

Mod edit: code removed

I have removed the code shared here because it violates our policy of not sharing solutions on the forum.