如何获取Input文本框值到JavaScript？求排查成绩判断代码错误

核心问题1：表单默认提交导致页面刷新 #

你的提交按钮是<input type="submit">，点击后会触发表单的默认提交行为，页面会立即刷新。这意味着mark()函数里的document.write内容刚显示就被刷新掉，你看到的"You Fail"其实是页面重置后的状态，并非函数执行的最终结果。

核心问题2：未处理非数字输入的异常情况 #

如果用户输入的不是有效数字，parseInt()会返回NaN，而NaN与任何数值比较的结果都是false，会直接进入else分支显示"You Fail"。

修复后的完整代码 #

JavaScript 部分

function mark(e) {
    // 阻止表单默认提交行为，避免页面刷新
    e.preventDefault();
    
    // 通过ID获取输入框，比document.form.mark的写法更可靠
    var inputElem = document.getElementById('mark1');
    var sMark = inputElem.value.trim();
    
    // 先验证输入是否为有效数字
    var myMark = parseInt(sMark);
    if (isNaN(myMark)) {
        alert("请输入有效的数字分数");
        return;
    }
    
    // 用专门的DOM元素显示结果，替代document.write（避免覆盖整个页面）
    var resultElem = document.getElementById('result');
    if (myMark > 75) {
        resultElem.textContent = "You pass exam with Higher mark";
    } else if (myMark > 50) {
        resultElem.textContent = "You pass exam";
    } else {
        resultElem.textContent = "You Fail";
    }
}

HTML 部分

<form action="" name="form" onsubmit="mark(event)">
    Enter Your Mark: <input type="text" name="mark" id="mark1">
    <input type="submit" value="Submit"><br>
    <!-- 用于展示结果的容器 -->
    <div id="result"></div>
</form>

关键修复说明 #

• 调用e.preventDefault()阻断表单默认提交逻辑，保留函数执行后的结果显示。
• 改用getElementById定位输入元素，避免依赖表单名称的写法在DOM结构变化时失效。
• 增加输入有效性校验，当输入非数字时给出明确提示，避免进入错误分支。
• 用DOM元素的textContent输出结果，替代document.write——后者在页面加载完成后调用会覆盖整个页面内容，体验极差。

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