调用SizeGuide函数时表单消失：点击按钮仅短暂显示变量值

处在<form>标签内部的<button>元素，如果没有手动指定type属性，根据HTML规范默认会被识别为submit类型按钮，点击时会触发原生表单提交流程，引导浏览器重载当前页面。
这就是“变量值仅短暂闪现1秒、原有表单消失”的本质：点击按钮时，先执行SizeGuide()方法把"4OZ"渲染到#show元素里，紧接着触发表单提交、整页重载，之前动态渲染的内容、未持久化的表单状态都会因为页面刷新被清空，看起来就像内容闪一下就没了。

• 方案1：给按钮显式指定非提交的类型
  直接修改按钮的HTML代码，加上type="button"属性，从根源取消按钮的表单提交职责：

  <button id="hello" type="button" onclick="SizeGuide()">Size:</button>
  

  这种方式改动最小，也是最推荐的标准写法——只要是不承担表单提交功能的按钮，都要显式标type="button"，避免浏览器默认行为带来的意料外问题。
• 方案2：在事件逻辑里阻止按钮默认行为
  如果不想修改按钮标签属性，可以在事件处理流程里拦截按钮的默认提交动作，对应调整JS和绑定代码：
  修改JS函数，增加默认行为拦截逻辑：

  function SizeGuide(e){
    // 兼容浏览器差异获取事件对象
    e = e || window.event;
    // 阻止按钮触发的默认提交/跳转行为
    e.preventDefault();
    if(document.getElementById("training").checked) {
      document.getElementById("show").innerHTML = four;
    }
  }
  

  同步修改按钮的onclick绑定，把原生事件对象传入函数：

  <button id="hello" onclick="SizeGuide(event)">Size:</button>
  

• 检查当前<form>标签有没有绑定onsubmit事件，如果有绑定提交逻辑，也要确认是否在回调里调用了e.preventDefault()，否则哪怕按钮设置成了type="button"，只要其他入口触发了表单提交，同样会出现页面重载、内容丢失的问题。
• 调试时可以在SizeGuide函数的最后打个断点，观察函数执行完之后的页面跳转/重载逻辑，快速定位触发重载的具体入口，避免漏查其他影响因素。

内容的提问来源于stack exchange，提问作者George-Valentin Pele