Question

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

2022-11-03

67

javascript html css

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

如果我单击一个按钮，所有按钮都会改变颜色，但随后会出现这个丑陋的错误：

main.js:135 Uncaught TypeError: Cannot set properties of undefined (setting 'backgroundColor') at buttonClicked (main.js:135:48) at 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>

Answer 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>

Answer 2

循环运行直至总 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>