HTML随机点名系统怎么做，找不到问题
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"
<meta name="viewport"content="width=device-width,initial-sca">
<title>Documenttitle>
<style>
#names li {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
margin-bottom: 10px;
margin-left: 10px;
background-color: aliceblue;
list-style: none;
padding: 0;
float: left;
}
#names {
padding: 0;
width: 500px;
}
style>
head>
<body>
<input id="btn" type ="button" value="随机点名">
<ul id="names">
<li>王虹li>
<li>李瑶嘉li>
<li>李宇鑫li>
<li>罗秀娟li>
<li>孙爱学li>
<li>罗秀文li>
<li>罗文阳li>
<li>于婉妮li>
<li>薛忠琴li>
<li>周倩li>
ul>
<script>
let btn = document.querySelector('#btn')
//定义一个变量记录上一次高亮的元素（定义变量不能放在上边的function里）
//初始值默认没有高亮
//布尔类型，记录定时器是否正在工作，默认false,没工作
let previous =null
let timerId = null
btn.onclick =function () {
if (isRunning){
isRunning = false
btn.value='随机点名'
//停止定时器
clearInterval(timerId)
//读出高亮的Li的内容'
let speech = new SpeechSynthesisUtterance(previousnode.textContent)
speechSynthesis.speak(speech)
// const text = node.textContent;)
} else {
isRunning =true
//定时器没有工作，创建一个定时器，开始
btn.value ='停止'
let timerId = setInterval(function(){
//把上一次高亮元素，重置背景颜色（默认背景颜色）
//首次点的时候不需要重置，需判断
if (previous != null) {
previous.style.backgroundColor ='aliceblue'
}
//获取name的所有li
let nameLis = document.querySelector('#names li')
//生成随机数[0,li的个数]，生成随机索引
let randomIndex = parseInt(Math.random() * nameLis.length)
//记录当前高亮元素，记录到previous变量
previous =nameLis[randomIndex]
//根据索引获取对应的Li，设置背景颜色
nameLis[randomIndex].style.backgroundColor = 'red'
},80)
}
}
script>
body>
html>
第一个问题
你在 onclick 时使用了 isRunning 变量，外边却没有定义
第二个问题
你在定义 nameLis 时使用的是 querySelector，这只返回第一个元素，你应该是使用 querySelectorAll，这样才是队列，你下边的索引才有意义
第三个问题
你在 onclick 里重新用 let 定义了 timerId，造成变量的使用域改变，记录的 timerId 无法传递到 isRunning 分支中，应该将 let 删除，外边已经有定义
第四个问题
你在 isRunning 分支中，使用了 preeviousnode，该变量未定义，应使用 previous
- 你可以看下这个问题的回答https://ask.csdn.net/questions/7482019
- meta 标签 写的有问题
- isRuning 没定义 需要在 最顶上定义
- querySelector 用错了，要获取 所有 li 那就得用querySelectorAll
- 语音说话 写的有问题 previousnode 没定义 ，具体参考：https://blog.csdn.net/a13407142317/article/details/125312010
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#names li {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
margin-bottom: 10px;
margin-left: 10px;
background-color: aliceblue;
list-style: none;
padding: 0;
float: left;
}
#names {
padding: 0;
width: 500px;
}
</style>
</head>
<body>
<input id="btn" type="button" value="随机点名">
<ul id="names">
<li>王虹</li>
<li>李瑶嘉</li>
<li>李宇鑫</li>
<li>罗秀娟</li>
<li>孙爱学</li>
<li>罗秀文</li>
<li>罗文阳</li>
<li>于婉妮</li>
<li>薛忠琴</li>
<li>周倩</li>
</ul>
</body>
<script>
let btn = document.querySelector('#btn')
//定义一个变量记录上一次高亮的元素（定义变量不能放在上边的function里）
//初始值默认没有高亮
//布尔类型，记录定时器是否正在工作，默认false,没工作
let previous = null
let timerId = null
let isRunning=false
btn.onclick = function () {
if (isRunning) {
isRunning = false
btn.value = '随机点名'
//停止定时器
clearInterval(timerId)
//读出高亮的Li的内容'
// let speech = new SpeechSynthesisUtterance(previousnode.textContent)
// speechSynthesis.speak(speech)
// const text = node.textContent;)
} else {
isRunning = true
//定时器没有工作，创建一个定时器，开始
btn.value = '停止'
timerId = setInterval(function () {
//把上一次高亮元素，重置背景颜色（默认背景颜色）
//首次点的时候不需要重置，需判断
if (previous != null) {
previous.style.backgroundColor = 'aliceblue'
}
//获取name的所有li
let nameLis = document.querySelectorAll('#names>li')
//生成随机数[0,li的个数]，生成随机索引
let randomIndex = parseInt(Math.random() * nameLis.length)
console.log(randomIndex,nameLis)
//记录当前高亮元素，记录到previous变量
previous = nameLis[randomIndex]
//根据索引获取对应的Li，设置背景颜色
console.log(nameLis[randomIndex], "999")
if (previous) {
nameLis[randomIndex].style.backgroundColor = 'red'
}
}, 80)
}
}
</script>
</html>
该回答引用GPTᴼᴾᴱᴺᴬᴵ
在代码中，有一些语法错误和逻辑错误：
1.在 meta 标签中，缺少一个右括号，应该为：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
2.在 meta 标签中，content 应该为：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
3.在 JavaScript 代码中，isRunning 变量没有初始化，应该在开始时初始化为 false。
4.在 JavaScript 代码中，nameLis 变量应该使用 querySelectorAll 函数来获取所有的 li 元素，而不是使用 querySelector 函数获取一个 li 元素。应该修改为：
let nameLis = document.querySelectorAll('#names li');
5.在 JavaScript 代码中，定时器里面应该使用 previous 变量来判断上一次高亮的元素，而不是使用 previousnode。应该修改为：
let speech = new SpeechSynthesisUtterance(previous.textContent);
6.在 JavaScript 代码中，定时器里面应该先重置上一次高亮的元素的背景颜色，然后再记录当前高亮的元素。应该修改为：
if (previous != null) {
previous.style.backgroundColor = 'aliceblue';
}
previous = nameLis[randomIndex];
nameLis[randomIndex].style.backgroundColor = 'red';
7.在 JavaScript 代码中，定时器的时间间隔设置为 80 毫秒可能太快了，可以适当调整为 200 毫秒。
https://blog.csdn.net/Mo_jian/article/details/127414619
若有帮助，望给个采纳，谢谢！
【原因：定时器那里不能再加一个let，必须是全局变量】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"
<meta name="viewport"content="width=device-width,initial-sca">
<title>Document</title>
<style>
#names li {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
margin-bottom: 10px;
margin-left: 10px;
background-color: aliceblue;
list-style: none;
padding: 0;
float: left;
}
#names {
padding: 0;
width: 500px;
}
</style>
</head>
<body>
<input id="btn" type ="button" value="随机点名">
<ul id="names">
<li>王虹</li>
<li>李瑶嘉</li>
<li>李宇鑫</li>
<li>罗秀娟</li>
<li>孙爱学</li>
<li>罗秀文</li>
<li>罗文阳</li>
<li>于婉妮</li>
<li>薛忠琴</li>
<li>周倩</li>
</ul>
<script>
let isRunning = false;
let btn = document.querySelector('#btn')
//定义一个变量记录上一次高亮的元素（定义变量不能放在上边的function里）
//初始值默认没有高亮
//布尔类型，记录定时器是否正在工作，默认false,没工作
let previous = null
let timerId = null
let ul = document.getElementById('names');
let nameLis = ul.getElementsByTagName('li');
btn.onclick = function () {
if (isRunning) {
isRunning = false
btn.value = '随机点名'
//停止定时器
clearInterval(timerId)
//读出高亮的Li的内容'
alert(previous.textContent)
} else {
isRunning = true
//定时器没有工作，创建一个定时器，开始
btn.value = '停止'
timerId = setInterval(function () {
//把上一次高亮元素，重置背景颜色（默认背景颜色）
//首次点的时候不需要重置，需判断
if (previous != null) {
previous.style.backgroundColor = 'aliceblue'
}
//document.querySelector('#names li')
//生成随机数[0,li的个数]，生成随机索引
let randomIndex = parseInt(Math.random() * nameLis.length)
//记录当前高亮元素，记录到previous变量
previous = nameLis[randomIndex]
//根据索引获取对应的Li，设置背景颜色
nameLis[randomIndex].style.backgroundColor = 'red'
}, 80)
}
}
</script>
</body>
</html>