Bartłomiej Wilczyński
Bartłomiej Wilczyński
6,269 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">
    <meta charset="utf-8">
    <title>To Do App</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="" rel="stylesheet">
    <link rel="stylesheet" href="css/basic.css">
    <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>
          <li>Make your bed</li>
          <li>Eat breakfast</li>
          <li>Be happy all day long</li>
      </div> <!-- /listDiv -->
    </div> <!-- /container -->

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

The JavaScript file:

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

container.addEventListener('click', (event) => {
  if ( === ".show-button") {
    if ( === "Show list" ) { = "block";

The CSS file:

.listDiv {
  display: none;

1 Answer

54,333 Points

The class name here is just the name:

if ( === ".show-button")

No need to begin with a period.

Bartłomiej Wilczyński
Bartłomiej Wilczyński
6,269 Points

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

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

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