我搞了很久，总是在flag位置报错

按照你这个页面这样写的话，底下加个按钮：
点击我
点击事件：
function handleClick(){
// 先拿到span
const spanNode = document.getElementsByTagName("span");
// 拿一下span的背景颜色，使用?.是因为spanNode有可能是空数组
const backgroundColor = spanNode[0]?.style?.backgroundColor ;
// 修改style
spanNode.forEach(node=>{
node.style.backgroundColor = (backgroundColor === "
#ffffff") ? "#
000000" : "#ffffff";
})
}

我的方式，分享给你，如果有问题可以再交流
css样式：
span {
background-color: black;
}
.spanBlack {
background-color: black;
}
.spanWhite {
background-color: white;
}
js代码：
let btn = document.createElement("button"); //创建按钮
btn.innerText = "我是按钮"; //按钮的名称按照自己的需求设定
btn.style.height = 30+"px";
btn.style.width = 80+"px";
document.querySelector("body").appendChild(btn); //将按钮元素添加到body中
let spans = document.querySelectorAll("span"); //获取span元素
// 监听点击事件的方法
let flag = false;
btn.addEventListener("click", () => { //监听按钮的点击事件
flag = !flag;
// 这里spans是一个类数组，无法直接使用forEach数组方法，需要先转化成数组再使用 Array.from(spans).forEach(spanNode => {
if (flag) {
spanNode.className = "spanWhite";
} else {
spanNode.className = "spanBlack";
}
});
, false);

这个不会