i want to change the background-color of all list elements of the unordered list with the id buttons.

If i click on a button, all buttons change their color, but then i get this ugly error:

main.js:135 Uncaught TypeError: Cannot set properties of undefined (setting 'backgroundColor') at buttonClicked (main.js:135:48) at HTMLLIElement. (main.js:65:72)

Where is the problem?

let buttons = document.querySelector("#buttons").querySelectorAll("li");
for ( let elements of buttons ) {
  elements.addEventListener( "click", function( event ) {buttonClicked( event )} );
}

function buttonClicked( event ) {
  let buttons = document.querySelector("#buttons").querySelectorAll("li");
  for ( let element in buttons ) {
    buttons[element].style.backgroundColor = "black";
  }
}

#buttons li {
    list-style-type: none;
    border-radius: 5px;
    background-color: rgba( 0, 57, 116, 0.5 );
    color: rgba( 255, 255, 255, 1);
    padding: 20px;
    margin: 10px;
}

#buttons li:hover {
    background-color: rgba( 0, 57, 116, 0.8 );
    cursor: pointer;
}

#buttons li:active {
    color: rgba( 150, 150, 150, 1); 
}

<ul id="buttons">
  <li id="round-view">Drag and drop</li>
  <li id="demo-view">Demo mode</li>
  <li id="home-view">View home</li>
  <li id="casing-view">Show/Hide Casing</li>
</ul>

CodePudding user response：

Adding null safety check for style resolves this problem.

let buttons = document.querySelector("#buttons").querySelectorAll("li");
for ( let elements of buttons ) {
  elements.addEventListener( "click", function( event ) {buttonClicked( event )} );
}

function buttonClicked( event ) {
  let buttons = document.querySelector("#buttons").querySelectorAll("li");
  for ( let element in buttons ) {
    if(buttons[element].style) 
      buttons[element].style.backgroundColor = "black";
  }
}

#buttons li {
    list-style-type: none;
    border-radius: 5px;
    background-color: rgba( 0, 57, 116, 0.5 );
    color: rgba( 255, 255, 255, 1);
    padding: 20px;
    margin: 10px;
}

#buttons li:hover {
    background-color: rgba( 0, 57, 116, 0.8 );
    cursor: pointer;
}

#buttons li:active {
    color: rgba( 150, 150, 150, 1); 
}

<ul id="buttons">
  <li id="round-view">Drag and drop</li>
  <li id="demo-view">Demo mode</li>
  <li id="home-view">View home</li>
  <li id="casing-view">Show/Hide Casing</li>
</ul>

CodePudding user response：

Run the loop only till total number of li

let buttons = document.querySelector("#buttons").querySelectorAll("li");
for ( let elements of buttons ) {
  elements.addEventListener( "click", function( event ) {buttonClicked( event )} );
}

function buttonClicked( event ) {
  let buttons = document.querySelector("#buttons").querySelectorAll("li");
  for (let i = 0; i < buttons.length; i  ) {
     buttons[i].style.backgroundColor = "black";
  }
}

#buttons li {
    list-style-type: none;
    border-radius: 5px;
    background-color: rgba( 0, 57, 116, 0.5 );
    color: rgba( 255, 255, 255, 1);
    padding: 20px;
    margin: 10px;
}

#buttons li:hover {
    background-color: rgba( 0, 57, 116, 0.8 );
    cursor: pointer;
}

#buttons li:active {
    color: rgba( 150, 150, 150, 1); 
}

<ul id="buttons">
  <li id="round-view">Drag and drop</li>
  <li id="demo-view">Demo mode</li>
  <li id="home-view">View home</li>
  <li id="casing-view">Show/Hide Casing</li>
</ul>