[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'.
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 e. e will always give you information about the event that has just occurred. Here, e 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: