更改所有列表元素的背景颜色答案

【问题标题】：Change the background-color of all list elements更改所有列表元素的背景颜色
【发布时间】：2022-11-04 02:18:35
【问题描述】：

我想用 id 按钮更改无序列表的所有列表元素的背景颜色。

如果我点击一个按钮，所有按钮都会改变它们的颜色，但是我得到了这个丑陋的错误：

main.js:135 未捕获类型错误：无法设置未定义的属性（设置“背景颜色”）在 buttonClicked (main.js:135:48) 在 HTMLLIElement。 (main.js:65:72)

问题出在哪里？

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>

【问题讨论】：

标签： javascript html css

【解决方案1】：

为样式添加空安全检查可解决此问题。

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>

【讨论】：