Button Not Working for Project?

Tell us what’s happening:

Describe your issue in detail here.

I don’t have the palindrome checker functionality yet, but for some reason when the input is empty nothing is happening. Can someone explain why this is?

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />
  <title>Hello, world!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="" />
  <link rel="icon" href="favicon.png">
  <h1>Hello, world!</h1>
  <input id="text-input"/>
  <button id="check-btn" type="button">Check</button>
  <div id="result"></div>

/* file: styles.css */
.button { 
  padding: 50px;

h1 {
  background-color: black;
/* file: script.js */
    const mainBtn = document.getElementById("check-btn")

    mainBtn.addEventListener('click', () => {
      var inputValue = document.getElementById('text-input').value;

      if (inputValue === "") {
        alert("Please input a value.");
      } else if (inputValue === "hello") {

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

Your html page is not linking the script or css file.

Happy coding

Hi there. In your HTML document, you don’t have a link to your CSS or your JavaScript. As such neither files will be recognized when you got to run the challenge.

To add back your JavaScript, add a script tag like the following above the closing body tag. All script tags need a src attribute pointing at the actual script file.

<script src="./script.js"></script>

To add back your CSS, add the following link element above the closing head tag. You have to set the link rel (relation) to stylesheet and then set the link’s location to your stylesheet.

 <link rel="stylesheet" href="./styles.css">

Happy learning. :slight_smile: