-
Notifications
You must be signed in to change notification settings - Fork 2
/
listeners2.js
28 lines (27 loc) · 1.54 KB
/
listeners2.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.addEventListener("load", function(e) { //entry point for browser-based JS applications is always an event listener
var btn = document.querySelector(".btn");
//event listener must have a variable name if you want to remove it later
var onClick = function(e) {
if (e.button !== 0) return; //don't execute unless left button is pressed
var flashyDiv = document.createElement("div");
flashyDiv.textContent = "wayyy too flashy for my own good";
flashyDiv.style.backgroundColor = "red"; //all .style properties of an Element correspond to CSS properties
flashyDiv.style.height = 0;
flashyDiv.style.transition = "height 500ms";
document.body.appendChild(flashyDiv);
var animateIn = function() { //another type of callback function
flashyDiv.style.height = "200px";
};
window.setTimeout(animateIn, 1); //wait 1 ms and then call the function
var hue = 0;
var handle = window.setInterval(function() {
flashyDiv.style.backgroundColor = "hsl(" + hue + ", 100%, 50%)";
hue = (hue + 1) % 256;
}, 30); //execute function every 30ms
//remove event listener and change button label to value from input box
btn.removeEventListener("click", onClick);
var sayAfter = document.querySelector("input.say-after");
btn.textContent = sayAfter.value || "You didn't type anything :("; //the || operator works on all variables in JS
};
btn.addEventListener("click", onClick);
});