HTML+JS实现的一元二次方程计算器无输出，求错误排查

核心问题点 #

• 最主要的原因是表单提交默认会触发页面刷新：你使用了type="submit"的按钮，点击后表单执行提交动作，页面立刻刷新，JS计算结果还没渲染就被重置了，所以看不到内容。
• 输入参数未显式转换为数字类型：input输入框取到的value默认是字符串类型，虽然部分场景下JS会隐式转换，但容易出现意料之外的运算错误，比如空输入的处理问题。
• 无关的拼写错误：link标签的rel属性值写成了stylessheet（多了一个s），会导致CSS加载失败，不过不影响JS逻辑运行。

修复方案 #

方案1：修改提交逻辑阻止刷新 #

调整表单提交逻辑，阻止默认刷新行为，同时把输入值转成数字：

1. 修改VypKvadr函数：

function VypKvadr(e) {
  // 阻止表单默认提交刷新行为
  e.preventDefault();
  // 获取表单
  const form = document.forms['formkvadr'];
  // 把输入值转成数字类型
  const a = Number(form.x.value.trim());
  const b = Number(form.y.value.trim());
  const c = Number(form.z.value.trim());
  // 赋值结果
  form.result.value = Kvadr(a, b, c);
}

2. 修改表单的触发属性，把原来的action="javascript:VypKvadr()"改成onsubmit="VypKvadr(event)"即可。

方案2：改用普通按钮触发计算 #

更简单的方式是直接不用submit按钮，改成普通按钮绑定点击事件：
把原来的提交按钮代码：

<input type="submit" value="Vypočti">

替换为：

<input type="button" value="Vypočti" onclick="VypKvadr()">

同时修改VypKvadr函数增加类型转换即可：

function VypKvadr() {
  const form = document.forms['formkvadr'];
  const a = Number(form.x.value.trim());
  const b = Number(form.y.value.trim());
  const c = Number(form.z.value.trim());
  form.result.value = Kvadr(a, b, c);
}

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