Listerfelt's Blog
JavaScript Event Listeners

JavaScript Event Listeners

Nicole Listerfelt's photo
Nicole Listerfelt
·

4 min read

In this post, we will focus on the three event listeners used in my Board Game Menu app: click, change and submit.

Click Event

There are two 'click' events in the following gif.

  • "I played this!" button

    • Increases the number of times played by one.

  • Small board game images

    • More information on the game is displayed on the left.

Here is the starting code we want to use.

.addEventListener('click', ()=>{})

Let's take a closer look at increasing the number of times played. This requires a PATCH request as well as fixing the "more information" section on the page.

Find the button.

const playedButton = document.getElementById('played-btn')

Add the event listener.

playedButton.addEventListener('click', e=>{
        e.preventDefault()
        playedIncrease(document.getElementById('game-id').innerText)
    })

In the second argument of .addEventListener(), we are creating an arrow function with the event being the argument. We prevent the page from reloading by using .preventDefault() attached to the event.

document.getElementByID('game-id').innerText will pass in the ID of the game we are changing into the function playedIncrease().

function playedIncrease(playedID){
    const newTimesPlayed = bigTimesPlayed.value+1
    fetch(`http://localhost:3000/games/${playedID}`,{
        method: 'PATCH',
        headers: {
            'content-type': 'application/json',
            Accept: 'application/json'
        },
        body: JSON.stringify({
            timesPlayed: newTimesPlayed
        })
    })
    .then(resp=>resp.json())
    .then(data=>{
        moreInfo(playedID)
    })
}

The PATCH is updating the number of times played behind the scenes. Whereas the moreInfo(playedID) in the second .then is updating the number shown in the more information section immediately.

Change Event

This event happens when the dropdown menu is changed. When a letter is selected, the small board game images change to display only the games with a starting letter of the one chosen.

The starting code:

.addEventListener('change', ()=>{})

Find the dropdown menu.

const filter = document.getElementById('filter')

Add the event listener.

filter.addEventListener('change', e=>{
        e.preventDefault()
        filterFunc(e.target.value)
}

The e.target.value is referring to the letter that was selected or "all games".

This filterFunc() function will update the small images using fetch to make a GET request.

function filterFunc(letter){
    gameContainer.innerText = ''
    fetch('http://localhost:3000/games')
    .then(resp=>resp.json())
    .then(data=>{
        if(letter==='All games'){
            data.forEach(game=>smallGame(game))
        } else {
            data.forEach(game=>{
                if(game.name.charAt(0).toUpperCase()===letter){
                    smallGame(game)
                }
            })
        }
    })
}

This function first clears out the container holding the small game images.

The fetch is used to either get all the games or just a portion based on the first letter of the titles. Notice that .UpperCase() is used because the title of a game could be entered as lower or upper case.

smallGame() is a function that will create the small images on the bottom as well as add the second 'click' event listener mentioned above.

Submit Event

The 'submit' event happens when a submit button on a form is clicked.

The starting code:

.addEventListener('submit', ()=>{})

Find the form.

const newForm = document.getElementById('add-new-game')

Add the event listener.

newForm.addEventListener('submit', e=>{
        e.preventDefault()
        const played = timesPlayedFunc(e.target.new_times_played.value)
        const game = {
            "name": e.target.new_title.value,
            "image": e.target.new_image.value,
            "minPlayers": e.target.new_min_players.value,
            "maxPlayers": e.target.new_max_players.value,
            "minTime": e.target.new_min_runtime.value,
            "maxTime": e.target.new_max_runtime.value,
            "timesPlayed": played,
            "category": e.target.new_category.value,
            "comments": e.target.new_comments.value
        }
        postNewGame(game)
        newForm.reset()
    })

First, the input for times played needs to be fixed using the timesPlayedFunc() function. This will check if a number greater than zero was entered and return that number. Otherwise, it will return zero. This is to prevent a word or symbol from being entered into the game object.

Next, we are setting up a game object. This will pass into postNewGame(). We find each input by taking the event, adding target, the ID and then value.

Lastly, notice newForm.reset(). This will clear out the previous inputs and get ready for a new game.

function postNewGame(gameInfo){
    fetch('http://localhost:3000/games',{
        method: 'POST',
        headers: {
            'content-type': 'application/json',
            Accept: 'application/json'
        },
        body: JSON.stringify(gameInfo)
    })
    .then(resp=>resp.json())
    .then(data=>{
        smallGame({id: data.id, ...gameInfo})
        moreInfo(data.id)
        firstLetterFunc(gameInfo.name.charAt(0))
    })
}

This function uses a POST request to save the new game to our list of all games. An ID is given to the game and needs to be added to the object before being passed into smallGame(). The spread operator is used to add the rest of the object.

smallGame() will create the small game image at the bottom of the page.

moreInfo() will display the game on the left-hand side to show all the information given.

Lastly, if this is a new first letter, firstLetterFunc() will add this letter to the dropdown menu for the 'change' event described above. If the letter is a repeat, then firstLetterFunc() will not update the dropdown menu.

Thoughts

There are many more events available. A great one to add to this app would be 'mouseover'. When the user moves their cursor over one of the small games, it could have a border.

JavaScriptevent listener