JS将min函数返回值赋值给innerHTML显示[object HTMLInputElement]问题

• 代码直接将first、second作为参数传入min函数，这两个变量是浏览器根据元素id自动暴露的DOM元素对象，而非输入框内的输入值。两个DOM对象进行大小比较时语法合法不会抛出报错，返回结果仍是DOM对象，赋值给innerHTML时对象会被默认转为字符串[object HTMLInputElement]，就是实际输出的内容。
• 存在隐藏逻辑问题：输入框的value属性默认是字符串类型，即便直接取value进行比较，也可能出现字符串排序的逻辑错误（例如'12' < '3'的执行结果为真，不符合数值比较的预期）。

修改点击事件监听的回调逻辑，先获取两个输入框的value并转为数字类型，再传入min函数运算即可，修改后的完整script代码如下：

<script>        
function min(a, b) {
    console.log('1');
    if (a>b) return b
    else return a;
}
butId.addEventListener('click', function(e){
   const num1 = Number(first.value);
   const num2 = Number(second.value);
   out.innerHTML = min(num1, num2);  
})
</script>

如果需要兼容非法输入的场景，可以额外增加输入合法性判断，在用户输入非数字内容时给出对应提示即可。

内容的提问来源于stack exchange，提问作者Курносов Павел