[JS]querySelectorAll問題求救

[PT-HUANG]

老師好，各位同學好
在練習利用JS改變CSS時遇到問題
目標是希望一次同時更改Button1、Button2的顏色

devTool顯示:
Uncaught TypeError: Cannot set properties of undefined (setting 'background')

無論更改Selector的方式：

1. div > span
2. div span
3. .BTN > span
4. .BTN span

都沒辦法順利選擇到元素
(有嘗試過使用querySelector，選擇單一元素改變顏色是沒問題的)

麻煩大家給我一些意見qq
非常感謝🙏🙏🙏

HTML
<div class="BTN">
  <span>Button1</span>
  <span>Button2</span>
</div>

CSS
<style>
.BTN {
  display: inline-block;
  margin-top: 5px;
}

.BTN > span {
  background: yellowgreen;
  padding: 20px;
  border: 1px solid white
}
</style>

JS
<script>
  const elements = document.querySelectorAll('.BTN span')
  elements.style.background = "red"
</script>

[aszx87410]

querySelectorAll 回傳的是一個很像陣列的東西，不是單一元素，所以 .style 會是 undefined
要自己用 forEach 去對每一個元素修改

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#accessing_the_matches

[PT-HUANG]

謝謝老師，問題解決了
再看一次課程影片後有發現問題在哪邊😅