My Build a Palindrome checker project doesn't complete

JavaScript
1

Hello, I’ve completed the JavaScript palindrome checker project, I’ve run all of the tests successfully and when I click the “Run the Tests” button the tests run without any error.

However the project doesn’t complete… I’ve made some changes to the code and it still doesn’t complete the project.

Is the problem in the code or is it a bug of the course?

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>Palindrome checker</title>
  </head>
  <body>
    <div>
      <input id = "text-input"/>
      <button id = "check-btn">check</button>
      <div id = "result">
      </div>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

JavaScript:

let text;

const inputValue = document.getElementById('text-input');
const checkButton = document.querySelector('#check-btn');
const result = document.querySelector("#result");


// initialize button
checkButton.onclick = checkInput;

//initialize input
inputValue.onchange = setText;




function checkInput(){
  if(text === null || text === undefined || text.trim().length === 0){
    alert("Please input a value");
    
  } else {
      removeNonAlphanumeric(text)
      checkPalindrome(text);
  }
}

function setText() {
  text = inputValue.value;
}

function removeNonAlphanumeric(str) {
    str = str.toLowerCase().replace(/[^a-zA-Z0-9]/g, '');
    text = str;
};

function checkPalindrome(string) {

    // convert string to an array
    const arrayValues = string.split('');

    // reverse the array values
    const reverseArrayValues = arrayValues.reverse();

    // convert array to string
    const reverseString = reverseArrayValues.join('');

    if(string == reverseString) {
        result.innerText = inputValue.value + ' is a palindrome';
    }
    else {
        result.innerText = inputValue.value + ' is not a palindrome';
    }
}
2

You can post your code to the forum using the Preformatted Text button

https://global.discourse-cdn.com/freecodecamp/original/3X/1/b/1b18854f1059217f29370444396145cc3a0cd8ae.gif
https://global.discourse-cdn.com/freecodecamp/original/3X/1/b/1b18854f1059217f29370444396145cc3a0cd8ae.gif1356×380 401 KB

3

My apologies, already edited the post :slightly_smiling_face:

5

Problem you are seeing is partially caused by the assumption that code makes and way how tests are currently trying each test case.

There’s global variable that keeps the updated text, based on the onchange event. Issue arises when way that’s changing the input is not firing the event, leaving the text outdated or empty. This is basically what’s happening during tests.

Consider whether there’s need to update the internal text on each change of the input - does it matter what’s in the input before button is clicked? I’d suggest trying to get rid of the global text variable, and when needed start with the value from input.

6

It worked! Removed the text variable and ran the tests and it passed!
Thank you very much

7

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