JavaScript更新HTML时页面意外自动刷新问题求助

我之前也踩过一模一样的坑！你遇到的自动刷新问题，大概率是表单默认提交行为在搞鬼，和innerHTML本身没啥关系，咱们一步步来解决：

最可能的原因：按钮触发了表单提交 #

如果你的myFunction是通过按钮触发的，而这个按钮又嵌套在<form>标签里，浏览器会默认把按钮点击当成「表单提交」操作，直接刷新页面。这是新手很容易忽略的浏览器默认行为。

快速解决方案：阻止事件默认行为 #

你只需要在触发函数时加上事件参数，调用preventDefault()就能挡住自动刷新：

先修改触发按钮的HTML：

<button onclick="myFunction(event)">生成质数列表</button>

再完善你的JS函数（顺便帮你补了质数判断的边界逻辑和效率优化）：

function myFunction(event){
  // 第一步：阻止浏览器默认的表单提交行为
  event.preventDefault();
  
  var primes = []; 
  function isPrime(num) { 
    // 补个边界判断：1及以下的数不是质数
    if(num <= 1) return;
    // 优化循环范围到平方根，比num/2效率更高
    for(var i = 2; i <= Math.sqrt(num); i++) { 
      if(num % i === 0 ) return false; 
    }
    primes.push(num); 
  } 
  function listOfPrimes(min, max) { 
    for(var j = min; j < max; j++) {
      isPrime(j);
    }
    // 把质数列表插入到页面元素中（假设你有个id为primeList的容器）
    document.getElementById('primeList').innerHTML = primes.join(', ');
  }
  
  // 调用函数，比如生成2到100之间的质数
  listOfPrimes(2, 100);
}

其他排查方向 #

如果上面的方法没用，你可以检查这两点：

• 代码里有没有不小心写了location.reload()或者window.location相关的跳转代码
• 如果用的是<input type="submit">触发函数，直接改成<input type="button">也能避免默认提交

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