Build a palindrome checker

JavaScript
1

Hello everyone, i’m stuck doing my first project in js. any guidance is welcome.
My problem is that when I press the button, nothing happens, I don’t know where to look for debugging.
My code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-80">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Palindrome Checker</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
  </head>
  <body>
    <main>
      <div class="main-container">
          <h2>< &#128187;milan web developer ></h2>
        <h1>Is it a Palindrome?</h1>
        <div class="palindrome-container">
          <form id="text-input-form">
            <label for="text-input" class="label-text">Enter in text to check for a palindrome:</label>
            <div>
            <input type="text" id="text-input" placeholder="Your word"required> 
            <button type="submit" class="check-btn" id="check-btn">Check</button>
            </div>
          </form>
        </div>
        <div class="result-container hidden" id="result">
          
        </div>
          <div class="palindrome-definicion">
        <p class="definicion-p"><span role="img" aria-label="light-bulb">💡</span>A <i>palindrome</i> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p>
      </div>
      </div>
    
    </main>
  </body>  
  <script src="./script.js"></script>
</html>


const textInput = document.getElementById('text-input');
const button = document.getElementById('check-btn');
const result = document.getElementById('result');

function clean (str) {
  const regex = /\W_/g;
  return str.match(regex);
}

    const input = textInput.value;
    const string = clean(input);
    const lowerString = string.toLowerCase(); 
     const copyLowerString = [...lowerString];
    const reverse = copyLowerString.split('').reverse().join('');

function palindrome() {
  if  (textInput.value === "") {
    alert("Please input a value")
  } else if(reverse === lowerString){
      result.classList.remove('hidden');
      result.innerHTML = `<strong>${textInput.value}</strong> is a palindrome`;
    } else {
      result.classList.remove('hidden');
      result.innerHTML = `<strong>${textInput.value}</strong> is not a palindrome`;
    }
  }
2

This might sound a bit strange, but what do you expect to happen instead? Which part of code is responsible for that?

3

I didn’t copy the last line of code

button.addEventListener("click", palindrome)
4

I didnt copy last line of code:

button.addEventListener("click", palindrome)
5

If you take a look at the console, there’s an error:

Uncaught TypeError: Cannot read properties of null (reading ‘toLowerCase’)

6

thank you, you helped me a lot. I changed the code a bit and now frist condicion of function palindrome works, if there is no value in input an alert appears, but if there is a value and run a function wordExists, console give me same same error. Uncaught TypeError: Cannot read properties of null (reading ‘toLowerCase’)

const textInput = document.getElementById('text-input');
const button = document.getElementById('check-btn');
const result = document.getElementById('result');

function clean (str) {
  const regex = /\W_/g;
  return str.match(regex);
}

function wordExists() {
    const input = textInput.value;
    const string = clean(input);
    const lowerString = string.toLowerCase();
    const copyLowerString = [...lowerString];
    const reverse = copyLowerString.split('').reverse().join('');

    if(reverse === lowerString){
      result.classList.remove('hidden');
      result.innerHTML = `${textInput.value} is a palindrome`;
    } else {
      result.classList.remove('hidden');
      result.innerHTML = `${textInput.value} is not a palindrome`;
    }
}

  

function palindrome() {
  if  (textInput.value === "") {
    alert("Please input a value");
  } else {
      wordExists();
  }
  }


button.addEventListener("click", palindrome)
7

I found where is problem, now program works, but there is something in logic that dont work, when I put input _eye , it said that _eye is not a palindrome, or if I put “race car” for input , program said that is not a palindrome.

const textInput = document.getElementById('text-input');
const button = document.getElementById('check-btn');
const result = document.getElementById('result');

function clean1 (str) {
  const regex = /\W/g;
  return str.replace(regex, '');
}

function wordExists() {
    const input = textInput.value;
    const string = clean1(input);
    const lowerString = string.toLowerCase();
    const reverse = lowerString.split('').reverse().join('');

    if(reverse === lowerString){
      result.classList.remove('hidden');
      result.innerHTML = `${textInput.value} is a palindrome`;
    } else {
      result.classList.remove('hidden');
      result.innerHTML = `${textInput.value} is not a palindrome`;
    }
}

  

function palindrome() {
  if  (textInput.value === "") {
    alert("Please input a value");
  } else {
      wordExists();
  }
  }


button.addEventListener("click", palindrome)
8

EUREKA, I found it, my first project work.

2 Likes
9

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