Day 6: Functions and Events

Functions & Events

What is a function?

Functions can be seen as 'actions' in our JavaScript, and they help bring our code to life.

Functions are what are used to "do stuff" or "make stuff happen" on a webpage

var para = document.querySelector('p')

function changeText() {
  para.textContent = "New content."
}

Events

Events are actions that occur within our pages. JavaScript provides a way for us to watch for those actions and call functions based on them called addEventListener.

For example, we can tell JavaScript to watch for a click on a certain element using addEventListener and assign a certain function to run when that click happens.

var para = document.querySelector('p')

function changeText() {
  para.textContent = 'New content.'
}

para.addEventListener('click', changeText)

.remove()

.remove() is a method that exists on all elements

it is used to remove an element from the DOM

var deleteBtn = document.querySelector('#delete-btn')
var box = document.querySelector('#box')

function deleteBox() {
  box.remove()
}

deleteBtn.addEventListener('click', deleteBox)

classList

Each element has a .classList property that holds a list of all of the classes assigned to that element.

There are 3 methods that we'll be using to edit the classList using JavaScript: .add(), .remove(), and .toggle()

var hideBtn = document.querySelector('#hide-btn')
var dropDownMenu = document.querySelector('#drop-down')

function toggleDropDown() {
  dropDownMenu.classList.toggle('hide')
}

hideBtn.addEventListener('click', toggleDropDown)