title: Replacing JQuery .val() with JS .value
body: <p>I'm going through some legacy code on a submission form and replacing JQuery w/ vanilla JS. </p>
  
  <p>Right now, I have this function that uses .val() (JQuery) to grab the value for an undefined input:</p>
  
  <pre><code>myFunction: function(){
            var subscription = $('input[name="subscription_id"]').val();
            // Do something with subscription
  }
  </code></pre>
  
  <p>When I run the code in my browser, I get no issues - the code is meant to work only if a subscription is passed into the input - if it's not there, we just get an undefined value.  The value returned by the JQuery combo of $() and .val() console logs to 'undefined'.</p>
  
  <p>When I replace the JQuery with vanilla JS, like so:</p>
  
  <pre><code>myFunction: function(){
            var subscription = document.querySelector('input[name="subscription_id"]').value;
            // Do something with subscription
  }
  </code></pre>
  
  <p>And then try to run my form, I get the following error in the console:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'value' of null
  </code></pre>
  
  <p>Why is this happening?  And is there a workaround for this?  Any help is appreciated.  Thanks in advance.</p>