Замена JQuery .val () на JS .value

Question

Я просматриваю устаревший код в форме отправки и заменяю JQuery на vanilla JS.

Прямо сейчас у меня есть эта функция, которая использует .val () (JQuery), чтобы получить значение для неопределенного ввода:

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

Когда я запускаю код в своем браузере, яникаких проблем - код предназначен для работы только в том случае, если на вход передается подписка - если ее там нет, мы просто получаем неопределенное значение. Значение, возвращаемое комбинацией JQuery консоли $ () и .val (), записывается в 'undefined'.

Когда я заменяю JQuery на ванильный JS, например:

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