Assign HTHL elements to variables in JavaScript

I have a question, which I would appreciate if someone clarifies it to me, about two different ways to assign variables in JavaScript, an HTML form element.

In the Web Development course, in Section 7 - Intermediate JavaScript, during the REQUESTS I and REQUESTS II lessons, HTML elements are assigned as follows:

const inputField = document.querySelector(’#input’);

So that the saved value is taken like this:

const wordQuery = inputField.value;

While in the same course, during the Wanderlust project, it is done like this:
const input = (’#city’);
const city = $input.val();

I had not seen this form of assignment in any of the previous JavaScript lessons and, therefore, I have several doubts about this topic.

I imagine it must be indifferent to use one way or another, but why in Wanderlust do they use that syntax? What is the difference? What benefit does one way have over the other?

I would appreciate the clarification. :slight_smile:

1 Like

I second your question. Right now, I’m on step 24 of Wanderlust and when I submit a city and see what is logged to the console, I get an error message saying the input isn’t defined:

main.js:38 Uncaught (in promise) ReferenceError: input is not defined at getForecast (main.js:38) at HTMLButtonElement.executeSearch (main.js:77) at HTMLButtonElement.dispatch (jquery-3.2.1.min.js:3) at HTMLButtonElement.q.handle (jquery-3.2.1.min.js:3)

However, my try block is identical to the hint’s try block. Really wish there was a video for this project.