用 JS.value 替换 JQuery.val()

Question

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

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

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

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

当我用香草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;

Answer 2

只需使用一个条件：

var elem = document.querySelector('input[name="subscription_id"]');
var subscription = elem ? elem.value : "";