Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

why was my code not working and it was showing an un caught addEventListener error

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Build a Palindrome Checker</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>
<body>
  <h2>freeCodeCamp()</h2>
  <h1>Is it a Palindrome?</h1>
<div class="container">
  <h4>Enter in text to check for a palindrome:</h4>
  <input id="text-input"></input>
  <button id="check-btn">Check</button>
  <div id="result"></div>
</div>
</body>
</html>


/* file: styles.css */
body{
  background-color: black;
}

h2 {
  text-align: center;
  margin-top: 20px;margin-bottom: 20px;
  color: white;
}
h1 {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  color: white;
}
.container {
  background-color: white;
  color: black;
  text-align: center;
  margin: auto;
   padding-top: 10px;
  padding-bottom: 30px;
  border-radius: 10px;
}
input[type="text"] {
  width: 80%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  background-color: purple;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;

}
button:hover {
  background-color: purple;
}

#result {
  margin-top: 20px;
  font-weight: bold;
}

/* file: script.js */
const inputValue = document.getElementById('text-input');
const checkButton = document.getElementById('check-btn');
const finalResult = document.getElementById('result');
checkButton.addEventListener("click",checkPalindrome);

function checkPalindrome() {
  if(inputValue.value === "") {
    alert('please input a value');
  } else if(inputValue.value === 'A') {
      console.log("A is a Palindrome");
  }
}

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Hey @monii,

Your code does work. Although, I’d definitely advise against using anything before it’s initialized. Your code still works, despite the function being added after it was set in the event listener, because the JS compiler looks for function declarations first before executing the addEventListener binding.

You should be creating things first and then calling them, because then you won’t typically need to worry about errors happening based on something being undefined.

1 Like
3 
const inputValue = document.getElementById('text-input');
const checkButton = document.getElementById('check-btn');
const finalResult = document.getElementById('result');
function checkPalindrome() {
  if(inputValue.value === "") {
    alert('please input a value');
  } else if(inputValue.value === 'A') {
      console.log("A is a Palindrome");
  }
}
checkButton.addEventListener("click",checkPalindrome);

i tried doing this but it didnt worked out somehow any inputs on how to make it…

4

That code is working the exact same as what you previously had. It is showing me a log in the console when the input value is exactly a capital A. And if it’s blank, it’s showing an alert to “please input a value.”

Moving the function above the addEventListener is only so that you don’t run into problems down the road when you’re creating other projects, but it didn’t change how the code runs.

5

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