Looking For Your Input

[Week 1 - TAAQUI GIPHY] · Lesson 4 · 11 minutes

In this lesson, we add additional event functions, look at if statements, and explore the non-timey-whimey properties of 'e'.

The logical next step in upping our javascript game is to grab whatever the user types in the input field and have it show up in an alert:


Look at this beautiful, beautiful code. We define whatever's in the input field as a variable called input, which .querySelector finds for us from our HTML document object model, or from the DOM. Then the value of that variable is passed into console.log. So that's two functions inside of one big function, onGoBtnClicked. 

Knowing all that, we can set up something pretty similar for when the user presses the enter key. But first we have to be able to get that function to identify when the enter key is pressed. So how to do we do that? With a secret object called ee will always give you information about the event that has just occurred. Here, is going to allow us to console.log all sort of properties of each key on the board as its pressed. One of the properties you see when you type into the input field, which, provides a number value that corresponds to the key. And lo and behold, when we hit enter, that value is 13.

So now we know a numerical value for enter, and we can use it to describe what we want to happen when a keypress event corresponds to that value. Or, in other words, we can now write a function that will happen if and only if the keypress value equals 13. Otherwise, just chill. It'll look like this: 


Note the three equal bars. Together they form a comparison operator, which tells javascript to do - shout it out if you can guess -  a comparison. Our if statement function needs to compare the actual value against the specified value in order to sort out which set of instructions to follow. 

Ask A Question

Having trouble? Don't worry, you're probably not the only one. Check out the questions other students have or ask yours.