querySelector返回null、jQuery.val()返回undefined，如何让原生JS返回undefined？

核心原因 #

原生document.getElementById匹配不到对应元素时会返回null，此时直接访问.value属性会抛出类型错误；而jQuery的选择器返回的是类数组集合，调用.val()时如果集合为空会直接返回undefined，不会触发报错，这就是你之前jQuery版本可以正常运行的原因。

解决方案 #

方案1：使用可选链操作符（推荐，ES2020+支持） #

直接在元素访问后加?.操作符，即可实现匹配不到元素时返回undefined的效果，完全对齐jQuery的行为。
修改后的代码如下：

function manage_cart(pid,type){
    let qty;
    if(type=='update'){
        qty = document.getElementById(pid + "qty")?.value;
    }else{
        qty = document.getElementById('qty')?.value;
    }
    // 后续原有逻辑保持不变即可
}

方案2：兼容旧环境的手动判断实现 #

如果运行环境不支持ES2020的可选链语法，可以手动加判断实现相同效果：

function manage_cart(pid,type){
    let qty;
    if(type=='update'){
        const el = document.getElementById(pid + "qty");
        qty = el ? el.value : undefined;
    }else{
        const el = document.getElementById('qty');
        qty = el ? el.value : undefined;
    }
    // 后续原有逻辑保持不变即可
}

额外说明 #

如果你后续要换成querySelector实现选择逻辑，也可以用相同的处理方式，document.querySelector('#qty')?.value同样会在匹配不到元素时返回undefined。

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