Live coding: JavaScript in the browser
Changing the DOM with JavaScript
html
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sandbox: Changing the DOM with JavaScript</title>
<link rel="stylesheet" href="styles.css">
<script src="app.js" defer></script>
</head>
<body>
<main class="container">
<a href="index.html"><h1>Sandbox: Changing the DOM with JavaScript</h1></a>
<section class="flex-container">
</section>
</main>
</body>
</html><!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sandbox: Changing the DOM with JavaScript</title>
<link rel="stylesheet" href="styles.css">
<script src="app.js" defer></script>
</head>
<body>
<main class="container">
<a href="index.html"><h1>Sandbox: Changing the DOM with JavaScript</h1></a>
<section class="flex-container">
</section>
</main>
</body>
</html>js
const songs = [
"Do They Know It's Christmas?",
"Relax",
"I Just Called to Say I Love You",
"Two Tribes",
"Don't You Want Me",
]
let flexContainer = document.querySelector('.flex-container')
for (let song of songs) {
flexContainer.innerHTML += `<p>${song}</p>`
}
let h1 = document.querySelector('h1')
h1.textContent = h1.textContent + '!'const songs = [
"Do They Know It's Christmas?",
"Relax",
"I Just Called to Say I Love You",
"Two Tribes",
"Don't You Want Me",
]
let flexContainer = document.querySelector('.flex-container')
for (let song of songs) {
flexContainer.innerHTML += `<p>${song}</p>`
}
let h1 = document.querySelector('h1')
h1.textContent = h1.textContent + '!'Event listener with named function
html
<button type="button">Add another word: </button><button type="button">Add another word: </button>js
let triggerButton = document.querySelector('button')
function addWord(event) {
let element = event.target
// console.log(element)
element.textContent += ' word'
}
triggerButton.addEventListener('click', addWord)let triggerButton = document.querySelector('button')
function addWord(event) {
let element = event.target
// console.log(element)
element.textContent += ' word'
}
triggerButton.addEventListener('click', addWord)Event listener with anonymous function
html
<button type="button">Add another word: </button><button type="button">Add another word: </button>js
let triggerButton = document.querySelector('button')
triggerButton.addEventListener('click', function (event) {
let element = event.target
// console.log(element)
element.textContent += ' word'
})let triggerButton = document.querySelector('button')
triggerButton.addEventListener('click', function (event) {
let element = event.target
// console.log(element)
element.textContent += ' word'
})Working with DOM objects
html
<section class="flex-container">
<p>Do They Know It's Christmas?</p>
<p>Relax</p>
<p>I Just Called to Say I Love You</p>
<p>Two Tribes</p>
<p>Don't You Want Me</p>
</section><section class="flex-container">
<p>Do They Know It's Christmas?</p>
<p>Relax</p>
<p>I Just Called to Say I Love You</p>
<p>Two Tribes</p>
<p>Don't You Want Me</p>
</section>js
let songs = document.querySelectorAll('p')
function remove(event) {
let p = event.target
let section = p.parentElement
section.removeChild(p)
}
function highlightBlue(event) {
let p = event.target
p.classList.toggle('blue')
}
for (let song of songs) {
song.addEventListener('click', remove)
// song.addEventListener('click', highlightBlue)
}
// OR using forEach
// songs.forEach(
// function (song) {
// song.addEventListener('click', remove)
// song.addEventListener('click', highlightBlue)
// }
// )let songs = document.querySelectorAll('p')
function remove(event) {
let p = event.target
let section = p.parentElement
section.removeChild(p)
}
function highlightBlue(event) {
let p = event.target
p.classList.toggle('blue')
}
for (let song of songs) {
song.addEventListener('click', remove)
// song.addEventListener('click', highlightBlue)
}
// OR using forEach
// songs.forEach(
// function (song) {
// song.addEventListener('click', remove)
// song.addEventListener('click', highlightBlue)
// }
// )Using JavaScript on forms
html
<form action="" id="background-color-form" method="post">
<div>
<label for="color">mustard, red, or blue?</label>
</div>
<div>
<input id="color" name="color">
<button type="submit">Submit</button>
</div>
</form><form action="" id="background-color-form" method="post">
<div>
<label for="color">mustard, red, or blue?</label>
</div>
<div>
<input id="color" name="color">
<button type="submit">Submit</button>
</div>
</form>js
// Make the background color change to the color entered by the user
// Select the form by the element name
let form = document.querySelector('form')
// Select the square div by the class "square"
let square = document.querySelector('.square')
// Defines what to do with the event
function changeColor(event) {
// First keep the browser from automatically refreshing the whole page.
event.preventDefault()
// Then get the target of the event. We know this is the form.
let form = event.target
// Get the input where the user typed the color.
colorInput = form.querySelector('input#color')
// Reset the classes on the square, including the string entered by the user.
color = colorInput.value
square.className = `shape square ${color}`
}
// This ties the form submit event to an action to take
form.addEventListener('submit', changeColor)// Make the background color change to the color entered by the user
// Select the form by the element name
let form = document.querySelector('form')
// Select the square div by the class "square"
let square = document.querySelector('.square')
// Defines what to do with the event
function changeColor(event) {
// First keep the browser from automatically refreshing the whole page.
event.preventDefault()
// Then get the target of the event. We know this is the form.
let form = event.target
// Get the input where the user typed the color.
colorInput = form.querySelector('input#color')
// Reset the classes on the square, including the string entered by the user.
color = colorInput.value
square.className = `shape square ${color}`
}
// This ties the form submit event to an action to take
form.addEventListener('submit', changeColor)