Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I’m just trying to get past the first step where it creates an alert for an empty string. I’m getting nothing, help please?

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">
<script src="script.js"></script>
<title>Build a Palindrome Checker</title>
</head>
<body>
<div id="main">
<h1>Palindrome Checker</h1>
<input id="text-input" >
<button id="check-btn">Check</button>
<p id="result"></p>
<div>
</body>
</html>

/* file: styles.css */
body {
  background: #ccc;
  font-family: arial;
}
#main {
  width: 50%;
  margin: 0 auto;
  margin-top: 100px;
}
h1 {
  color: darkgreen;
}
#text-input {
  width: 200px;
  height: 20px;
  margin: 0 20px 0 0;
}
#check-btn {
  width: 55px;
  height: 20px;
}

/* file: script.js */
const textInput = document.getElementById('text-input');
const checkBtn = document.getElementById('check-btn');

checkBtn.addEventListener('click', checkVal);

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 OPR/114.0.0.0

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

1 Like
2

Hi there!

Make the evnetListener a callback function. Remove the function checkVal, just leave the if statement there within the callback function. Your alert test will pass

3

can you give me a hint with code example? I tried this and i didn’t get anything:

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

checkBtn.addEventListener("click", () => {
    const textValue = textInput.value.trim();
    if (textValue === "") {
        alert("Please input a value");
    };
});
4

I think you shouldn’t call a function before it’s declared. In that case you can declare the eventlistener call below the function and it will probably work.

1 Like
5

you need to define the type in your input and probably the input value will not be an empty string

1 Like
6

EDIT: I had to load the js file at the bottom of the HTML file I got it

2 Likes