set display: block in javascript doesnt work

Question

Hi I have a problem with my code. I want to set display: block when i click on "start" button. I created addevenlistener on click but something is wrong. Can anyone to help me?

const ulElement = document.querySelectorAll("li");
const btn = document.querySelector("button");


function changeSize() {
  ulElement.style.display = "block";
}

btn.addEventListener("click", changeSize);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>list</title>
    <style>
      li {
        display: none;
      }
    </style>
  </head>

  <body>
   

    <button>Start</button>
    <ul>
      <li>element 1</li>
      <li>element 2</li>
      <li>element 3</li>
      <li>element 4</li>
      <li>element 5</li>
      <li>element 6</li>
      <li>element 7</li>
      <li>element 8</li>
      <li>element 9</li>
      <li>element 10</li>
    </ul>

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

There is an error message in your console. What have you done to fix that? document.querySelectorAll returns a NodeList, which does not have a style attribute. — mykaf
– mykaf, Commented Dec 30, 2022 at 19:59

Adam Fanslau · Accepted Answer · 2022-12-30 20:08:44Z

1

Not sure if this is what you had in mind but if you change:

li {
        display: none;
      }

to:

ul {
        display: none;
      }

And if you change:

const ulElement = document.querySelectorAll("li");

to:

const ulElement = document.querySelector("ul");

Then it will work the list will appear after clicking on the button....

answered Dec 30, 2022 at 20:08

Adam Fanslau

511 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Sarkar · Accepted Answer · 2022-12-30 20:01:36Z

You have querySelectorAll you have selected all the liElements and you should have an array node lists not a single element hence why you can't just use e.style.display on an array, what you need to do is loop through all the items and set thier display one by one

const ulElement = document.querySelectorAll("li");
const btn = document.querySelector("button");


function changeSize() {
  ulElement.forEach(e => e.style.display = "block")
  //ulElement.style.display = "block";
}

btn.addEventListener("click", changeSize);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>list</title>
    <style>
      li {
        display: none;
      }
    </style>
  </head>

  <body>
   

    <button>Start</button>
    <ul>
      <li>element 1</li>
      <li>element 2</li>
      <li>element 3</li>
      <li>element 4</li>
      <li>element 5</li>
      <li>element 6</li>
      <li>element 7</li>
      <li>element 8</li>
      <li>element 9</li>
      <li>element 10</li>
    </ul>

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

Collectives™ on Stack Overflow

set display: block in javascript doesnt work

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related