lightblubs/script.js at main · Nicole0150/lightblubs · GitHub

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
// let light1 = document.querySelector("#lightbulb1");
// let light2 = document.querySelector("#lightbulb2");
// let light3 = document.querySelector("#lightbulb3");
let subtitle = document.querySelector(".subtitle");
let count = 0;
let lightlist = document.querySelectorAll(".lightbulb");


// lightlist[0].addEventListener("click", function() {
//     lightlist[0].classList.toggle("active");
//     count++;
//     if (count===1) {
//         subtitle.innerHTML = `You've clicked the lights ${count} time`;
//     } else {
//         subtitle.innerHTML = `You've clicked the lights ${count} times`;
//     }
// })

// lightlist[1].addEventListener("click", function() {
//     lightlist[1].classList.toggle("active");
//     count++;
//     subtitle.innerHTML = `You've clicked the lights ${count} times`;
//     if (count===1) {
//         subtitle.innerHTML = `You've clicked the lights ${count} time`;
//     } else {
//         subtitle.innerHTML = `You've clicked the lights ${count} times`;
//     }
// })

// lightlist[2].addEventListener("click", function() {
//     lightlist[2].classList.toggle("active");
//     count++;
//     subtitle.innerHTML = `You've clicked the lights ${count} times`;
//     if (count===1) {
//         subtitle.innerHTML = `You've clicked the lights ${count} time`;
//     } else {
//         subtitle.innerHTML = `You've clicked the lights ${count} times`;
//     }
// })

//Example 3: Modifying DOM Elements
// Consider you want to add event listeners to a list of elements with the class name .lightbulb, as in your previous examples:

function forMouseEnter(event) {
    event.target.classList.add("active");
    count++
    if (count===1) {
        subtitle.innerHTML = `You've interacted with the lights ${count} time`;
    } else {
        subtitle.innerHTML = `You've interacted with the lights ${count} times`;
    }
}

function forMouseLeave(event) {
    event.target.classList.remove("active");
    count++
    if (count===1) {
        subtitle.innerHTML = `You've interacted with the lights ${count} time`;
    } else {
        subtitle.innerHTML = `You've interacted with the lights ${count} times`;
    }
}

lightlist.forEach(lightbulb =>{
    lightbulb.addEventListener("mouseenter", forMouseEnter);
    lightbulb.addEventListener("mouseleave", forMouseLeave);
})
// lightlist.forEach((lightbulb) => {
//     lightbulb.addEventListener("click", function() {
//         this.classList.toggle("active");
//         count++
//         subtitle.innerHTML = `You've clicked the lights ${count} times`;
//         if (count===1) {
//             subtitle.innerHTML = `You've clicked the lights ${count} time`;
//         } else {
//             subtitle.innerHTML = `You've clicked the lights ${count} times`;
//         }
//     });
// });