为何通过JavaScript的innerHTML修改div内容后会自动恢复为空？

你遇到的这个问题太常见啦——结果刚显示就消失，核心原因是表单的默认提交行为在搞鬼！你的按钮放在<form>标签里，浏览器默认会把它当成提交按钮，点击后会触发页面刷新，刚填充到<div>里的内容自然就被清空了。

快速修复方案 #

有两种简单的方法解决这个问题：

方法1：修改按钮类型为button

直接给按钮加上type="button"，明确告诉浏览器这不是提交按钮：

<button type="button" onclick="displayResults()">Submit</button>

方法2：在点击事件中阻止默认行为

如果不想改按钮类型，也可以在displayResults函数里拦截表单的默认提交动作，需要给函数传事件参数：

function displayResults(event) {
  // 阻止表单默认提交导致的页面刷新
  event.preventDefault();
  // 原有计算逻辑...
}

同时HTML里的按钮调用要传递事件对象：

<button onclick="displayResults(event)">Submit</button>

额外的优化建议 #

除了页面刷新的问题，你的代码还有几个小细节可以优化，让计算器更靠谱：

• 数值转换问题：输入框的value是字符串类型，直接用high - low会导致字符串拼接而非数值计算，需要转成数字：

  high = parseFloat(document.getElementById("highInput").value);
  low = parseFloat(document.getElementById("lowInput").value);
  

• 下跌趋势计算逻辑错误：你原来的else分支里fib1和fib3都用了fib3const，这明显不对。下跌趋势应该从高点往低点计算回撤位，正确逻辑是：

  else {
    fib1 = high - fib1const * elapsed;
    fib2 = high - fib2const * elapsed;
    fib3 = high - fib3const * elapsed;
  }
  

• 换行与数值格式化：innerHTML里的\n不会在HTML中显示换行，换成<br>标签排版更清晰；用toFixed(2)让数值保留两位小数，看起来更专业：

  document.getElementById("result").innerHTML = 
    "ATH Resistance: " + high + "<br>" +
    "Fib1 Res/Sup: " + fib1.toFixed(2) + "<br>" +
    "Fib2 Res/Sup: " + fib2.toFixed(2) + "<br>" +
    "Fib3 Res/Sup: " + fib3.toFixed(2) + "<br>" +
    "ATL Support: " + low;
  

修改后的完整代码 #

HTML部分

<!DOCTYPE html> 
<html> 
<head> 
  <title>Stock Manager</title> 
  <script src="script.js"></script> 
</head> 
<body> 
  <form autocomplete="off" id="inputForm" style="width: 50%; margin-left:auto; margin-right: auto; padding: 20px; background-color: #eee; text-align: center;"> 
    <input type="text" placeholder="All Time High" id="highInput" style="width: 75%; text-align: center;" onchange="adjustVariables()"><br><br> 
    <input type="text" placeholder="All Time Low" id="lowInput" style="width: 75%; text-align: center;" onchange="adjustVariables()"><br><br> 
    <input type="text" placeholder="Trend (up/down)" id="trendInput" style="width: 75%; text-align: center;" onchange="adjustVariables()"><br><br> 
    <button type="button" onclick="displayResults()">Submit</button> 
    <div id="result" style="font-size: 18px; font-weight: bold; width: 75%; margin-left: auto; margin-right: auto; text-align: left;"> 
    </div> 
  </form> 
</body> 
</html>

JS部分

var high = null; 
var low = null; 
var trend = ""; 
var fib1 = null; 
var fib2 = null; 
var fib3 = null; 
const fib1const = 0.236; 
const fib2const = 0.382; 
const fib3const = 0.618; 

function adjustVariables() { 
  // 转换为数值类型，同时处理空输入
  high = parseFloat(document.getElementById("highInput").value) || null;
  low = parseFloat(document.getElementById("lowInput").value) || null;
  trend = document.getElementById("trendInput").value.trim().toLowerCase();
} 

function displayResults() { 
  // 先校验输入合法性
  if (!high || !low || !["up", "down"].includes(trend)) {
    document.getElementById("result").innerHTML = "请输入有效的高点、低点，以及正确的趋势（up/down）";
    return;
  }

  var elapsed = high - low; 
  if (trend === "up") { 
    // 上升趋势：从低点往上计算回撤位
    fib1 = low + fib1const * elapsed; 
    fib2 = low + fib2const * elapsed; 
    fib3 = low + fib3const * elapsed; 
  } else { 
    // 下跌趋势：从高点往下计算回撤位
    fib1 = high - fib1const * elapsed; 
    fib2 = high - fib2const * elapsed; 
    fib3 = high - fib3const * elapsed; 
  }
  
  // 格式化输出结果
  document.getElementById("result").innerHTML = 
    "ATH Resistance: " + high + "<br>" +
    "Fib1 Res/Sup: " + fib1.toFixed(2) + "<br>" +
    "Fib2 Res/Sup: " + fib2.toFixed(2) + "<br>" +
    "Fib3 Res/Sup: " + fib3.toFixed(2) + "<br>" +
    "ATL Support: " + low; 
}

这样修改后，不仅解决了结果消失的问题，还优化了输入校验、计算逻辑和显示效果，使用起来更顺手啦。

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