用 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 : "";