如何修复抽奖系统代码点击一次后停止执行的问题？

问题根源 #

你的代码中，random 变量是在脚本加载时仅计算一次的常量。这意味着无论点击多少次按钮，都会使用同一个随机索引，导致每次结果都一样，看起来像是"停止执行"。此外，按钮上的重复 data-target 属性是无效的，会干扰模态框的正常触发。

修复步骤 #

1. 将随机索引的生成逻辑移至点击触发的函数内部：确保每次点击时都重新计算随机值，而不是只计算一次。
2. 移除重复的 data-target 属性：按钮只需要一个 data-target="#myModal" 来触发模态框。
3. 优化代码复用：创建辅助函数统一处理随机元素的获取，避免重复代码。

修复后的完整代码 #

<!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">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
  <title>Document</title>
</head>

<body>

  <div class="container">
    <h2>Lottey Winner </h2>
    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" id="btn1" onclick="myFunction()">
          Winner
        </button>
    <div class="modal" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">THE WINNER ISSSS</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <div class="modal-body">
            <p id="test"></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    const a = ["12", "34", "45", "67"];

    // 辅助函数：获取随机元素
    function getRandomWinner() {
      const randomIndex = Math.floor(Math.random() * a.length);
      return a[randomIndex];
    }

    window.addEventListener("click", () => {
      const winner = getRandomWinner();
      console.log(winner);
    });

    function myFunction() {
      const winner = getRandomWinner();
      document.getElementById("test").innerHTML = winner;
    }
  </script>
</body>

</html>

关键变更说明 #

• 辅助函数 getRandomWinner()：每次调用都会重新生成随机索引并返回对应的元素，确保每次点击都能得到新的随机结果。
• 移除重复 data-target：按钮只保留 data-target="#myModal"，确保模态框正常触发。
• 函数内生成随机值：控制台打印和模态框显示都通过调用辅助函数获取新的随机元素，避免重复逻辑。

内容的提问来源于stack exchange，提问作者Sam Stalin