点击按钮后textarea无法显示随机问题的技术求助

核心问题 #

1. 随机问题仅初始化一次：生成随机数和问题的代码写在全局作用域，页面加载时就固定了结果，点击按钮只会重复设置同一个问题，不会生成新内容。
2. 按钮自带页面刷新行为：按钮上的onClick="window.location.reload()"会在点击时刷新整个页面，直接打断JS逻辑执行，导致问题无法正常显示。

修复后的代码 #

HTML部分（移除刷新行为）

<div class="wrapper">
  <div class="card">
    <div class="card-header">
      <h2>Generate a World Question</h2>
    </div>
    <div class="card-body">
      <textarea readonly id="password" aria-label="Generated World Question"></textarea>
    </div>
    <div class="card-footer">
      <button id="generate" class="btn" type="button">Generate World Question</button>
    </div>
  </div>
</div>

JavaScript部分（将生成逻辑移入点击函数）

var generateBtn = document.querySelector("#generate");

function writeQuestion() {
  let randomNumber = Math.floor(Math.random() * 8);
  let worldQuestion = '';

  if (randomNumber == 0) {
    worldQuestion = 'Highest Point';
  } else if (randomNumber == 1) {
    worldQuestion = 'Lowest Point';
  } else if (randomNumber == 2) {
    worldQuestion = 'Highest Population';
  } else if (randomNumber == 3) {
    worldQuestion = 'Lowest Population';
  } else if (randomNumber == 4) {
    worldQuestion = 'Most Neighboring Countries';
  } else if (randomNumber == 5) {
    worldQuestion = 'Least Neighboring Countries';
  } else if (randomNumber == 6) {
    worldQuestion = 'Biggest Area';
  } else if (randomNumber == 7) {
    worldQuestion = 'Smallest Area';
  }

  var passwordText = document.querySelector("#password");
  passwordText.value = worldQuestion;
}

generateBtn.addEventListener("click", writeQuestion);

可选优化（简化代码） #

把问题列表改成数组，减少冗余的判断逻辑：

const questions = [
  'Highest Point',
  'Lowest Point',
  'Highest Population',
  'Lowest Population',
  'Most Neighboring Countries',
  'Least Neighboring Countries',
  'Biggest Area',
  'Smallest Area'
];

function writeQuestion() {
  const randomIndex = Math.floor(Math.random() * questions.length);
  document.querySelector("#password").value = questions[randomIndex];
}

var generateBtn = document.querySelector("#generate");
generateBtn.addEventListener("click", writeQuestion);

内容的提问来源于stack exchange，提问作者Josh G.