Palindrome Checker - Passing Tests - How?

Hello,

I get all the desired results in my browser to pass the tests. I have the requested html elements with the requested ‘id’ values. None of the Javascript passes, even though I update the inner HTML of the ‘results’ element (a div element by request) with the exact value that is requested. The preview will even print the exact verbiage for the alert when empty input is attempted to be passed, but that test fails too. Can anyone advise? I will move on for now because this doesn’t seem like a great use of time given I’ve figured out the functionality and seen it work in my own browser (even in the preview browser as well).

Warning: spoilers below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Palindrome Checker</title>
</head>
<body>
    <form id="form">
        <label>Test field: 
            <input id='text-input' type="text" required
            oninvalid="this.setCustomValidity('Please input a value')"
            />
        </label>
        <br /><br />
        <button id="check-btn">Submit form</button>
      </form>
      <div id="result">
      </div>
      <script type="text/javascript" src="./script.js"></script>
</body>
</html>
// VARIABLES

const form = document.getElementById("form");
const textInput = document.getElementById('text-input')
const result = document.getElementById("result");

// FUNCTIONS

function cleanString(input) {
  return input.replace(/[ \/\\_.|&;$%@"<>()+,-]/g, "").toLowerCase();
}

function checkSingleLetter(input) {
  return input.length === 1; 
}

function checkMultiLetter(input) {
  if (input.length < 2) {
    return false;
  }

  let reversedStringArray = [];
  stringArray = input.split('');
  stringArray.forEach(element => {
    reversedStringArray.unshift(element);
  });
  console.log(reversedStringArray.join())
  return stringArray.join('') === reversedStringArray.join('');
}

function logSubmit(event) {
  let clnString = cleanString(textInput.value);
  console.log(clnString);
  console.log(checkSingleLetter(clnString));
  console.log(checkMultiLetter(clnString));
  if (checkSingleLetter(clnString)) {
    result.innerHTML = `${textInput.value} is a palindrome`;
  }

  if (checkMultiLetter(clnString)) {
    result.innerHTML = `${textInput.value} is a palindrome`;
  } else {
    result.innerHTML =`${textInput.value} is not a palindrome`;
  }

  event.preventDefault();
}


form.addEventListener("submit", logSubmit);

Does it have to do with listening for a “submit”?

1 Like

I think it might have something to do with that as well as the form element. I’m going to try restructuring the html later today and see if I can get it to work.

I kept my palindrome logic, which meets all tests, and started a really simple HTML page according to test conditions and I’m getting through a lot of the issues I had. Definitely had to do with using a form and a submit button.

1 Like

Update: all passed. Woop woop :slight_smile: