如何实现点击按钮时执行指定JS代码而非刷新页面？

原HTML代码中按钮点击会触发页面刷新，现在要改成点击按钮时执行指定的骰子逻辑，无需刷新页面，具体操作步骤如下：

• 修改按钮点击事件
  把按钮的onclick="window.location.reload()"替换为调用自定义函数，比如onclick="rollDice()"，避免页面刷新。

• 修复目标JS代码的语法错误
  原JS代码里存在一处语法问题：document.querySelectorAll('img'[0] 缺少闭合引号和括号，需修正为document.querySelectorAll('img')[0]，确保DOM选择器能正常工作。

• 封装逻辑并引入JS代码
  将修复后的JS逻辑封装成函数，放在HTML的<script>标签中（建议放在<body>末尾，确保DOM元素加载完成后再执行）。

完整代码示例 #

<h1>Refresh Me</h1>
<div>
  <button onclick="rollDice()">
    Let's Find Out
  </button>
</div>
<!-- 页面需包含两个用于显示骰子的img标签 -->
<img src="images/dice1.png" alt="Dice 1">
<img src="images/dice1.png" alt="Dice 2">

<script>
function rollDice() {
  var randomNumber1 = Math.floor(Math.random() * 6) + 1;
  var randomDiceImage = "dice" + randomNumber1 + ".png";
  var randomImageSource = "images/" + randomDiceImage;
  document.querySelectorAll('img')[0].setAttribute("src", randomImageSource);

  var randomNumber2 = Math.floor(Math.random() * 6) + 1;
  var randomDiceImage2 = "dice" + randomNumber2 + ".png";
  var randomImageSource2 = "images/" + randomDiceImage2;
  document.querySelectorAll("img")[1].setAttribute("src", randomImageSource2);

  if (randomNumber1 > randomNumber2) {
    document.querySelector("h1").innerText = "Kirsty Makes Tea";
  } else if (randomNumber1 < randomNumber2) {
    document.querySelector("h1").innerText = "Danny Makes Tea";
  } else {
    document.querySelector("h1").innerText = "It's a draw";
  }
}
</script>

关键说明 #

• 移除页面刷新逻辑后，点击按钮会直接执行骰子生成逻辑，实现无刷新更新页面内容
• 修正语法错误后，能正确选中页面中的两个图片元素并更新其src属性，切换骰子图片
• 函数封装后，逻辑更清晰，按钮点击时直接触发对应操作

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