forked from gSchool/stoplight-event-exercise
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
36 lines (32 loc) · 1.37 KB
/
index.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
29
30
31
32
33
34
35
36
//Declare variables for HTML elements
let stopButton = document.getElementById('stopButton')
let stopLight = document.getElementById('stopLight')
let slowButton = document.getElementById('slowButton')
let slowLight = document.getElementById('slowLight')
let goButton = document.getElementById('goButton')
let goLight = document.getElementById('goLight')
//Function invocation
mouseOverEvents()
clickEvents()
//Global functions
function changeColor(light,state) {
light.classList.toggle(state)
if (light.classList.length == 2) {
console.log(`ON`)
} else {
console.log(`OFF`)
}
}
function mouseOverEvents() {
stopButton.addEventListener('mouseleave', () => {console.log(`Left stop button`)})
stopButton.addEventListener('mouseenter', () => { console.log(`Entered stop button`)})
slowButton.addEventListener('mouseleave', () => {console.log(`Left slow button`)})
slowButton.addEventListener('mouseenter', () => { console.log(`Entered slow button`)})
goButton.addEventListener('mouseleave', () => {console.log(`Left go button`)})
goButton.addEventListener('mouseenter', () => { console.log(`Entered go button`)})
}
function clickEvents() {
stopButton.addEventListener("click",() =>{ changeColor(stopLight,"stop")});
slowButton.addEventListener("click", () => { changeColor(slowLight,"slow")});
goButton.addEventListener("click",() =>{ changeColor(goLight,"go")});
}