如何在代码中正确实现按钮功能？实现点击展示自定义球队选项

先梳理原代码存在的问题：

• 错误使用Element.querySelector，正确写法是document.querySelector
• 事件监听的事件名多了多余的点，应该是'click'而非'.click'
• 仅获取了展示元素但未做赋值操作，没实现“展示选项”的核心逻辑
• 初始仅随机生成一次球队，若需每次点击切换不同选项，要把随机逻辑移到点击事件内

以下是修正后的完整可运行代码：

// 定义球队列表
let teams = ["atalanta", "Bologna", "Cremonese", "Empoli", "Fiorentina", "Verona", "Inter", "Juventus", "Lazio", "Lecce", "Milan", "Monza", "Napoli", "Roma", "Salernitana", "Sampdoria", "Sassuolo", "Spezia", "Torino", "Udinese"];

// 提前获取DOM元素，避免重复查询
const searchBtn = document.querySelector('.search');
const guessElement = document.querySelector('.guess');

// 绑定按钮点击事件
searchBtn.addEventListener('click', function() {
    // 每次点击随机挑选一个球队
    const randomTeam = teams[Math.floor(Math.random() * teams.length)];
    // 将选中的球队名称展示到页面
    guessElement.textContent = randomTeam;
    // 控制台输出用于调试
    console.log(randomTeam);
});

核心优化点说明： #

• 提前获取按钮和展示元素，减少DOM查询次数，提升性能
• 把随机生成球队的逻辑放在点击事件中，确保每次点击都能得到新的随机选项
• 使用teams.length替代硬编码的20，后续球队列表增减时无需修改该数值
• 通过textContent将选中的球队名称赋值给展示元素，完成页面显示的核心需求

内容的提问来源于stack exchange，提问作者Ran Yohanan