按下回车触发alert时调用input的value返回undefined是什么原因

• 混淆了jQuery对象和原生DOM对象的属性用法：通过$('#food')选择器拿到的是jQuery封装后的实例对象，不是原生的HTMLInputElement节点，只有原生DOM节点才有value属性，jQuery对象本身没有该属性，直接读取自然返回undefined。
• 读取对象不存在的属性本身属于合法JS语法，仅会返回undefined不会抛出语法错误，因此控制台没有报错提示。

有两种常用修复方式，按需选择即可：

方法1：使用jQuery内置的val()方法读取值（推荐） #

jQuery封装了表单元素的取值/赋值方法val()，直接调用即可，修改后的代码如下：

$('#food').on('keypress',function(e) {
 if(e.which == 13) {
    // 也可以直接用$(this).val()，不用重复查询DOM，性能更优
    const food = $('#food').val();
    alert(food);
 }
});

方法2：转为原生DOM对象后读取value属性 #

可以通过下标[0]或者get(0)从jQuery对象中取出原生DOM节点，再调用value属性：

$('#food').on('keypress',function(e) {
 if(e.which == 13) {
    // 此处this就是绑定事件的原生DOM，也可以直接写const food = this.value
    const food = $('#food')[0].value;
    alert(food);
 }
});

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