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)Day 6: Functions and Events
By Devmountain
