const - JS | lectureDOM & Events Fundamentals

Let's now make our application do something when we click on the check button. This will be the first time that our code reacts to something that happens in the DOM. For that, we need to use an event listener.

An event is something that happens on the page, e.g., a mouse click, a mouse moving, a keypress, etc. With an event listener, we can wait for a certain event to happen and then react to it.

In your JavaScript file, you can delete everything we wrote in the previous lecture because we are now going to code the app step by step.

To listen for an event, we first need to select the element where the event should happen. In our case, we want to listen to the event on the check button element. Because it is on that button that the click event we are interested in will happen.

The first thing we are going to do is to select the button element.

document.querySelector('.check');

On that element, we will now call the addEventListener method.

document.querySelector('.check').addEventListener();

There are multiple ways of listening to events in JavaScript, but using the addEventListener method is the best and most used. In the addEventListener method, the first parameter it takes is the type of event we want to listen to .i.e. a click. The second parameter tells the event listener what to do. That is, we need to specify the reaction to the click event.

We do that by defining a function. That function will contain the code that should be executed whenever the click event happens on our check button element. That function is called the event handler.

document.querySelector('.check').addEventListener('click', function () {
  // Specify what should happen
  // What we want is to log the value of the input field when the button is clicked
  console.log(document.querySelector('.guess').value);
});

If you now save everything, you will notice that whatever value you write in your input field and then click on the check button, that value is being logged to the console.

One important thing to note with the addEventListener method is that the function being passed as second parameter is not called anywhere. We only defined the function and then passed it to the event handler. It is the role of the JavaScript engine to call the function as soon as the event happens.

Let's now slowly build up our game. In the game, when we click on the check button, the input value needs to be retrieved. So, instead of logging in to the console, let's instead save it in a variable.

const guess = document.querySelector('.guess').value;

If you remember what was said in the fundamentals section, then you should know that what we usually get from the user interface, for example, from an input field it's usually always a string.

console.log(typeof guess); // Result ==> string

However, we will eventually have to compare the number from our input field with a randomly generated number ( the secret number we must guess). So if we have to compare numbers with numbers, we have to convert the string we get from our input to a number.

const guess = Number(document.querySelector('.guess').value);

Let's end this lecture by implementing the simplest case of our game logic, which is the case where there is no guess. Because in such applications like this, where we ask for an input value from a user, the first thing to do is check if there is a value. If there is no value, then we can log something to the console as a response.

/**
 * When the page first loads, our input field is empty, the value of guess is 0
 * If you remember what we said in the fundamentals, 0 is a falsy value
 * guess then in the logical context of the if statement will be false
 * Since we want something to happen whenever it is false (guess), it means in our if condition we want a true value, and so we simply use the negation operator to invert the boolean value (guess) from false to true
 */
if (!guess) {
  document.querySelector('.message').textContent = '⛔ No number!';
}

After saving everything, if we now click on the check button and our input field is empty, we will see that the text changes from 'Start guessing...' to '⛔ No number!'.