javascript - 用 JS .value 替换 JQuery .val()

Question

我正在检查提交表单上的一些遗留代码，并用 vanilla JS 替换 JQuery。

现在，我有这个函数，它使用 .val() (JQuery) 来获取未定义输入的值:

myFunction: function(){
          var subscription = $('input[name="subscription_id"]').val();
          // Do something with subscription
}

当我在浏览器中运行代码时，没有遇到任何问题 - 该代码仅在将订阅传递到输入时才起作用 - 如果不存在，我们只会得到一个未定义的值。 $() 和 .val() 控制台 JQuery 组合返回的值记录为“未定义”。

当我用 vanilla JS 替换 JQuery 时，如下所示:

myFunction: function(){
          var subscription = document.querySelector('input[name="subscription_id"]').value;
          // Do something with subscription
}

然后尝试运行我的表单，我在控制台中收到以下错误:

Uncaught TypeError: Cannot read property 'value' of null

为什么会发生这种情况？有解决方法吗？任何帮助表示赞赏。提前致谢。

Answer 1

发生这种情况是因为

document.querySelector('input[name="subscription_id"]')

不存在。对于vanilla js，您需要先检查它是否存在，如果存在则获取值。 jQuery 对此有一个无声的失败。

var element = document.querySelector('input[name="subscription_id"]');

// If it exists, return its value, or null
var subscription = element ? element.value : null;