如何在按下按钮时一次突出显示 JavaScript 中的一个元素并停在随机元素

Question

我在 h3 标签中存储了一些名字，当我按下一个按钮时，我希望它们一次只突出显示一个，然后停在一个随机的名字上。

 <div class="all-names">
            <h3 class="name-one"><span class="line">Name One</span></h3>
            <h3 class="name-two">Name2</h3>
            <h3 class="name-three">Name3</h3>
            <h3 class="name-four">Name4</h3>
            <h3 class="name-five">Name5</h3>
            <h3 class="name-six">Name6</h3>
            <h3 class="name-seven">Name7</h3>
            <h3 class="name-eight">Name8</h3>
            <h3 class="name-nine">Name9 <span class="arrow"></span></h3>
            
        </div>

姓名one如果不是星期一必须划掉，如果不是星期一也不会高亮

const nameOne = document.querySelector(".name-one")
const goBtn = document.querySelector(".btn")
let allNames = document.querySelector(".all-names")
const isOne = document.querySelector(".answer")
const date=new Date();
const isMonday = date.getDay();

if(isMonday === 1) {
    setTimeout(() => {
        isOne.textContent = 'yes'   
    }, 600);
} else {
    setTimeout(() => {
        isOne.textContent = 'no'        
    }, 600);

let nameArray = []

goBtn.onclick = function() {
    const elements = document.getElementsByTagName("h3")
    for (i=0; i < elements.length; i++) {
        teamArray.push(elements[i])
        // let noNameOne = nameArray.shift()  //i would like to remove nameOne whenever it is not a monday;  
        let randomName = Math.floor(Math.random() * nameArray.length)
            nameArray[randomName].style.backgroundColor= "white"
        
        nameArray.forEach(randomName => {
            nameArray[randomName].style.backgroundColor= "none"
        });
    }
}

现在的代码，它会产生控制台错误：

TypeError: Cannot read properties of undefined (reading 'style')
    at app.js:44:35
    at Array.forEach (<anonymous>)
    at goBtn.onclick (app.js:43:19)
(

如果我删除 forEach 位，当我按下按钮时，它将突出显示几个随机名称。所以问题是这些：

1. 按下按钮时，我应该突出显示一个 h3 元素，然后删除突出显示并突出显示下一个元素。我应该补充一点，每个元素都可以多次突出显示，而不仅仅是一次； -> 这应该是一个相当快速的迭代，直到它随机停止在一个将保持突出显示的元素处。 然后，我应该可以再次按下按钮并重新运行整个过程。