<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
h2 {
text-align: center;
}
.box {
width: 600px;
margin: 50px auto;
display: flex;
font-size: 25px;
line-height: 40px;
}
.qs {
width: 450px;
height: 40px;
color: red;
}
.btns {
text-align: center;
}
.btns button {
width: 120px;
height: 35px;
margin: 0 50px;
}
</style>
</head>
<body>
<h2>小氏家族随机点名</h2>
<div class="box">
<span>名字是:</span>
<div class="qs">这里显示姓名</div>
</div>
<div class="btns">
<button class="start">开始</button>
<button class="end">结束</button>
</div>
<script>
// 数据数组
const arr = ['小帅', '小美', '小英', '小灰灰', '小小']
let n =0
// 2所以在此声明了一个变量
let random = 0
random = Math.floor(Math.random() * arr.length)
const qs = document.querySelector(`.qs`)
// 开始按钮模块
const start = document.querySelector('.start')
// 添加点击事件
start.addEventListener('click',function () {
// 1 此处用let n = set......无效,此处为局部变量,外面无法调用
n= setInterval(function() {
const random = Math.floor(Math.random() * arr.length)
qs.innerHTML=arr[random]
},35)
if (arr.length=== 1) {
start.disable = true
}
})
// 关闭按钮模块
const end = document.querySelector('.end')
end.addEventListener('click',function() {
clearInterval(n)
// 删除当前抽取的那个元素
arr.splice(random, 1)
console.log(arr);
})
</script>
<html>
在结束后删除数组元素有一点问题,求
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
2条回答 默认 最新
- GISer Liu 2024-02-23 18:38关注
该回答引用自GPT-3.5,由博主GISer Liu编写:
根据你的代码描述,你遇到的问题是在点击结束按钮后删除数组元素时出现了问题。让我来分析一下。
问题出现在以下代码段:
javascriptCopy codeconst end = document.querySelector('.end') end.addEventListener('click', function() { clearInterval(n) // 删除当前抽取的那个元素 arr.splice(random, 1) console.log(arr); })
在这段代码中,你尝试使用
arr.splice(random, 1)
来删除数组中的一个元素,但这里的random
变量并不是在点击结束按钮时重新生成的。在开始按钮的点击事件中,你定义了一个局部变量random
来生成随机数,但在结束按钮的点击事件中,你使用的是上一次生成的random
值,这可能导致删除的不是你当前想要删除的元素。
解决这个问题的方法是,将``` random下面是修改后的代码: javascriptCopy code
const end = document.querySelector('.end')
end.addEventListener('click', function() {
clearInterval(n)
// 重新生成随机数
const random = Math.floor(Math.random() * arr.length)
// 删除当前抽取的那个元素
arr.splice(random, 1)
// 更新界面上显示的名字
qs.innerHTML = arr[random] || "已经没有名字了"
console.log(arr);
})```
在这里,我将随机数的生成放在了结束按钮的点击事件内部,确保每次点击结束按钮时都会重新生成随机数。然后,我更新了界面上显示的名字,确保它与删除后的数组匹配。
希望这能解决你的问题!如果该回答解决了您的问题,请采纳!如果没有,请参考以下方案进行修订
解决 无用评论 打赏 举报
悬赏问题
- ¥30 电脑误删了手机的照片怎么恢复?
- ¥15 (标签-python|关键词-char)
- ¥15 python+selenium,在新增时弹出了一个输入框
- ¥15 苹果验机结果的api接口哪里有??单次调用1毛钱及以下。
- ¥20 学生成绩管理系统设计
- ¥15 来一个cc穿盾脚本开发者
- ¥15 CST2023安装报错
- ¥15 使用diffusionbert生成文字 结果是PAD和UNK怎么办
- ¥15 有人懂怎么做大模型的客服系统吗?卡住了卡住了
- ¥20 firefly-rk3399上启动卡住了