Problem with palindrome checker

JavaScript
1

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

image
image1161×699 85.7 KB

2

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.

3

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

4

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…

5

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

6 
<!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;
}
7

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.

8

so what should i do?

9

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

1 Like
10

thanks a lot, it worked :smiling_face_with_three_hearts:

1 Like
11

Mod edit: code removed

13

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