如何让奇偶校验功能正确输出结果？输出[object HTMLFormElement]异常

问题根源 #

你遇到的问题核心原因有三个：

1. 参数传递错误：调用isEvenorOdd(this.form)时只传入了表单对象，但函数定义的第一个参数num期望接收数字，导致num实际是<form>元素对象，输出时显示为[object HTMLFormElement]。
2. 取模逻辑异常：对象与数字取模会得到NaN，NaN % 2 == 0返回false，所以始终进入奇数分支。
3. 类型未转换：输入框的值是字符串类型，即使传对参数，直接取模也可能出现不符合预期的结果。

修正方案 #

下面提供两种可行的修正方式：

方式一：修改函数调用，传入输入值并转数字

• HTML代码修改：给输入框添加name属性，调整按钮的onclick参数，同时将提示文字改为中文：

检查数字奇偶性：
<form>
<input type="text" name="numberInput">
<input type="button" value="检查" onclick="isEvenorOdd(this.form.numberInput.value);">
</form>
<div id="result"></div>

• JS代码修改：在函数内将输入的字符串转为数字，增加无效输入判断，输出改为中文：

function isEvenorOdd(num) {
    num = Number(num);
    if (isNaN(num)) {
        document.getElementById('result').innerHTML = "请输入有效的数字";
        return;
    }
    if (num % 2 === 0) {
        document.getElementById('result').innerHTML = `${num} 是偶数`;
        console.log(`${num} 是偶数`);
    } else {
        document.getElementById('result').innerHTML = `${num} 是奇数`;
        console.log(`${num} 是奇数`);
    }
}

方式二：修改函数接收表单对象，内部获取输入值

• HTML代码修改：给输入框添加name属性，提示文字改为中文：

检查数字奇偶性：
<form>
<input type="text" name="numberInput">
<input type="button" value="检查" onclick="isEvenorOdd(this.form);">
</form>
<div id="result"></div>

• JS代码修改：函数直接处理表单对象，提取输入值并转数字，输出改为中文：

function isEvenorOdd(form) {
    const num = Number(form.numberInput.value);
    if (isNaN(num)) {
        document.getElementById('result').innerHTML = "请输入有效的数字";
        return;
    }
    if (num % 2 === 0) {
        document.getElementById('result').innerHTML = `${num} 是偶数`;
        console.log(`${num} 是偶数`);
    } else {
        document.getElementById('result').innerHTML = `${num} 是奇数`;
        console.log(`${num} 是奇数`);
    }
}

关键注意点 #

• 必须将输入框的字符串值转为数字类型，否则字符串与数字取模会得到不符合预期的结果。
• 增加无效输入判断（比如非数字内容），避免程序出现异常并提升用户体验。

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