点击提交按钮后真空光速旅行时间计算表单失效问题排查

以下是导致你的计算器无法正常运行的具体问题及修正方案：

核心问题点 #

• DOM方法拼写错误：document.getElementByID是错误写法，JS对大小写敏感，正确的方法名是document.getElementById（注意Id的小写d），拼写错误会直接导致无法获取输入框元素。
• 数字语法错误：代码中的300 000包含空格，JS不允许数字中间存在空格，应改为300000（对应光速约30万公里/秒的数值）。
• 表单默认提交行为未阻止：点击submit按钮后，浏览器会默认提交表单并刷新页面，导致计算结果刚生成就被清空。
• 输入值类型未转换：从输入框获取的value是字符串类型，直接参与除法运算可能引发异常，需显式转换为数字类型。
• 输入框赋值方式错误：要修改input元素的显示内容，需设置value属性而非innerHTML——input是自闭合标签，innerHTML无法修改它的显示值。

修正后的完整代码 #

HTML部分 #

<div class="text-justify index_text_style">
    <p>这是一个计算光在真空中传播指定公里数所需时间的计算器。</p>
</div>
<form class="light_forms">
    <label class="index_text_style" for="km_count">输入公里数</label>
    <input type="number" id="km_count" name="km_count">
    <label class="index_text_style" for="km_count">[km]</label>
    <br> <br>

    <label class="index_text_style" for="result_min">结果：</label>
    <input type="text" id="result_min" name="result_min" disabled>
    <label class="index_text_style" for="result_min">[min] </label>
    <br> <br>

    <label class="index_text_style" for="result_h">结果：</label>
    <input type="text" id="result_h" name="result_h" disabled>
    <label class="index_text_style" for="result_h">[h] </label>
    <br> <br>

    <input type="submit" value="计算" onclick="results(event)"> <input type="reset" value="重置">
</form>

JS部分（放在</body>前） #

function results(event) {
    // 阻止表单默认提交刷新行为
    event.preventDefault();
    // 获取输入值并转换为浮点数
    var km_count = parseFloat(document.getElementById("km_count").value);
    // 计算光传播时间：先转秒，再转分钟/小时
    var result_min = km_count / 300000 / 60;
    var result_h = km_count / 300000 / 3600;

    // 给结果输入框赋值，保留小数位提升可读性
    document.getElementById("result_min").value = result_min.toFixed(6);
    document.getElementById("result_h").value = result_h.toFixed(8);
}

内容的提问来源于stack exchange，提问作者ITK.Damian