Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

My code works as described but codecamp does not accept the code. Why?

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" />
    <title>Palindrome Checker</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
      <h1>
        Palindrome checker
      </h1>
      <div id="box">
        <input id="text-input">
        <button id="check-btn">
          check
        </button>
        <span id="result"></span>
      </div>
    </main>
    <script src="script.js"></script>
  </body>
  </html>

/* file: script.js */
document.getElementById("check-btn").addEventListener("click", checker);

let word = document.getElementById("text-input").addEventListener("input", function() {
  word = this.value;
})

function reverse () {
  let reversed ="";
  for (let i = word.replace(/[^a-zA-Z0-9]/g, '').length - 1; i >= 0; i--) {
        reversed += word.replace(/[^a-zA-Z0-9]/g, '')[i].toLowerCase(); 
    }
  return reversed;
}

function checker () {
  if (word === undefined) {
    alert("Please input a value"); 
  } else if (word.replace(/[^a-zA-Z0-9]/g, '').toLowerCase() === reverse()) { 
    document.getElementById("result").innerHTML = `${word} is a palindrome`
  } else { 
    document.getElementById("result").innerHTML = `${word} is not a palindrome`
}
}

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

I don’t think the input event is dispatched during testing, so your word is not updated

1 Like
3

The word variable is being re-declared with let inside the input event listener, causing scoping issues. In the input event listener, the word variable is not being updated correctly since this.value is assigned to word but not returned. The reverse function relies on the word variable, which might be undefined if not properly updated. The reverse function is over-complicating things by replacing non-alphanumeric characters and reversing each time.

1 Like
4

where? I see only one let word, did I miss something?

5

thank you. declaring word in the checker function let me change the value without the input eventlistener.