HTML
<button id="greetingButton">Say greeting</button> <p id="greetingParagraph"></p>
JavaScript
let greetingButton = document.getElementById(`greetingButton`) let greetingParagraph = document.getElementById(`greetingParagraph`) // your code will appear here function sayGreeting() { greetingParagraph.innerHTML = `Welcome to exercise set 1` }
Your code
Test your code
HTML
<button id="jokeButton">Tell joke</button> <p id="jokeParagraph"></p>
JavaScript
let jokeButton = document.getElementById(`jokeButton`) let jokeParagraph = document.getElementById(`jokeParagraph`) // your code will appear here function tellJoke() { jokeParagraph.innerHTML = `What do you call 2000 mockingbirds?` }
Your code
Test your code
HTML
<button id="answerButton">Show answer</button> <p id="answerParagraph"></p>
JavaScript
let answerButton = document.getElementById(`answerButton`) let answerParagraph = document.getElementById(`answerParagraph`) // your code will appear here function showAnswer() { answerParagraph.innerHTML = `Two kilo mockingbird` }
Your code
Test your code
HTML
<p id="textParagraph">Click me</p>
JavaScript
let textParagraph = document.getElementById(`textParagraph`) // your code will appear here function changeText() { textParagraph.innerHTML = `Good job!` }
Your code
Test your code
Click me
HTML
<img src="/img/cat.png" id="cat"> <p id="catParagraph"></p>
JavaScript
let cat = document.getElementById(`cat`) let catParagraph = document.getElementById(`catParagraph`) // your code will appear here function makeCatSound() { catParagraph.innerHTML = `Meow` }
Your code
Test your code
HTML
<img src="/img/dog.png" id="dog"> <p id="dogParagraph"></p>
JavaScript
let dog = document.getElementById(`dog`) let dogParagraph = document.getElementById(`dogParagraph`) // your code will appear here function makeDogSound() { dogParagraph.innerHTML = `Woof` }
Your code
Test your code
HTML
<button id="nameButton">Show name</button> <p id="nameParagraph"></p>
JavaScript
let nameButton = document.getElementById(`nameButton`) let nameParagraph = document.getElementById(`nameParagraph`) nameButton.addEventListener(`click`, showName) function showName() { // your code will appear here }
Your code
Test your code
HTML
<button id="ageButton">Show age</button> <p id="ageParagraph"></p>
JavaScript
let ageButton = document.getElementById(`ageButton`) let ageParagraph = document.getElementById(`ageParagraph`) ageButton.addEventListener(`click`, showAge) function showAge() { // your code will appear here }
Your code
Test your code
HTML
<button id="messageButton">Show message</button> <p id="messageParagraph"></p>
JavaScript
let messageButton = document.getElementById(`messageButton`) let messageParagraph = document.getElementById(`messageParagraph`) messageButton.addEventListener(`click`, showMessage) function showMessage() { // your code will appear here }
Your code
Test your code
HTML
<button id="eraseButton">Erase message</button> <p id="messageDisplay">Erase me</p>
JavaScript
let eraseButton = document.getElementById(`eraseButton`) let messageDisplay = document.getElementById(`messageDisplay`) eraseButton.addEventListener(`click`, eraseMessage) function eraseMessage() { // your code will appear here }
Your code
Test your code
Erase me
HTML
<button id="changeButton">Change my text</button>
JavaScript
let changeButton = document.getElementById(`changeButton`) changeButton.addEventListener(`click`, changeText) function changeText() { // your code will appear here }
Your code
Test your code
HTML
<button id="boxButton">Show message in box</button> <div id="box"></div>
JavaScript
let boxButton = document.getElementById(`boxButton`) let box = document.getElementById(`box`) boxButton.addEventListener(`click`, showMessageInBox) function showMessageInBox() { // your code will appear here }
Your code
Test your code