Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

When I run my code, it says [TypeError: alertMessage is undefined]. Not sure why this is occurring, i think because of the message it’s to do with the alert but I’m don’t see anything wrong with it.

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" />
<link rel="stylesheet" href="styles.css" />
<title>
      THE PALINDROME JUDGE
    </title>
  </head>
  <body>
    
    <div>Your Palindromes must be tested. Enter them here and hear their fate!<input id="text-input" type="text"></input><button id="check-btn" onclick="checkPalindrome">JUDGEMENT</button></div>
    <div id="result"></div>
    <script src="script.js"></script>
  </body>
  </html>

/* file: script.js */
//button and result,  onclick already defaults to method
const button = document.getElementById("check-btn");
const result = document.getElementById("result");
const checkPalindrome = ()=>{
//takes the input and checks it first for value
const input = document.getElementById("text-input");
  if(input.value === "")
  {//no value, alerts
    console.log(input.value)
   return alert("Please input a value");
   
  }
  else
  {//checks for palindrome
    const stu =input.replace(/[^A-Za-z0-9]/gi,'').toLowerCase();
  
  console.log(stu);
  for(let x = 0; x<stu.length;x++)
  {
    
    //when it isn't, if says not a palindrome, otherwise says it is
      if(stu.charAt(x)!=stu.charAt(stu.length-1-x))
      {
        result.innerText = `${input.value} is not a palindrome`;
      }
  }
  result.innerText = `${input.value} is a palindrome`;
}
  
};



/* file: styles.css */
:root {
  /* colors */
  --primary-color: #1fdfe2;
  --secondary-color: #af3d6f;
  --app-background-color: #ad4d62;
  --background-color: #ab1b32;
  --foreground-color: #3a3b4f;
  --highlight-color: #f1be32;

body {
  background-color: var(--app-background-color);
  color: var(--primary-color);
  font-family: var(--font-family);
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:133.0) Gecko/20100101 Firefox/133.0

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

I have reason to suspect that you just discovered a bug in one of the tests for this project.

Secondly when you click on the #check-btn element without entering a value into the #text-input element, anything in particular happens? Is there an alert message on the screen?

3

Welcome to the forum @seanscillia220

There are two issues with your code:

  1. input elements do not have a closing tag.
  1. Without round braces the function does not get called.

Happy coding

4

this is a small bug that happens if alert is not called in your code, you can follow the others’ suggestions to fix your code.
I have opened a bug ticket for this, and it should be fixed in the next few weeks (at least after new year)

5

Those fixed it, now the alert appears, thanks.

1 Like