JavaScript

Bartłomiej Wilczyński
Bartłomiej Wilczyński
5,948 Points

Hi, why my button is not working?

Hello, I want the button with the class "show-button" tho show the list with the class "listDiv". What I did wrong in my app.js file? Here are all the files: The HTML file:

<!DOCTYPE html>
<html lang="pl" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>To Do App</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/basic.css">
  </head>
  <body>
    <div class="container">
      <h1>To Do App</h1>
      <p>The best app to organize your time</p>
      <button type="button" class="show-button">Show list</button>
      <div class="listDiv">
        <p>The things you need to do today:</p>
        <ul>
          <li>Make your bed</li>
          <li>Eat breakfast</li>
          <li>Be happy all day long</li>
        </ul>
      </div> <!-- /listDiv -->
    </div> <!-- /container -->

    <script src="app.js"></script>
  </body>
</html>

The JavaScript file:

const container = document.querySelector(".container");
const showButton = document.querySelector(".show-button");
const listDiv = document.querySelector(".listDiv");


container.addEventListener('click', (event) => {
  if (event.target.className === ".show-button") {
    if ( event.target.textContent === "Show list" ) {
      listDiv.style.display = "block";
    }
  }
});

The CSS file:

.listDiv {
  display: none;
}

1 Answer

KRIS NIKOLAISEN
PRO
KRIS NIKOLAISEN
Pro Student 51,914 Points

The class name here is just the name:

if (event.target.className === ".show-button")

No need to begin with a period.

Bartłomiej Wilczyński
Bartłomiej Wilczyński
5,948 Points

Ok, thank you. One more question, when I did something like this:

container.addEventListener('click', (event) => {
  if ( event.target.className == "show-button" ) {
    if ( listDiv.style.display == "none" ) {
      listDiv.style.display = "block";
      showButton.textContent = "Hide list";
    } else {
      listDiv.style.display = "none";
      showButton.textContent = "Show list";
    }
  }
});

It is also not working, can you tell me why?