JavaScript
x
28
28
1
let count = 0;
2
let counter = document.querySelector("#number-el");
3
let btns = document.querySelectorAll(".btn");
4
let decreaseEl = document.querySelector(".decrease-el");
5
let increaseEl = document.querySelector(".increase-el");
6
7
btns.forEach(function(btn) {
8
btn.addEventListener("click", function() {
9
if (decreaseEl) {
10
count--;
11
console.log(count);
12
} else if (increaseEl) {
13
count++;
14
} else {
15
count = 0;
16
}
17
if (count < 0) {
18
counter.style.color = "green";
19
}
20
if (count > 0) {
21
counter.style.color = "red";
22
}
23
if (count === 0) {
24
counter.style.color = "yellow";
25
}
26
counter.textContent = count;
27
});
28
});
JavaScript
1
10
10
1
<div class="container">
2
<div>
3
<p id="counter-el">COUNTER
4
<div id="number-el">0</div>
5
</p>
6
<button class="btn increase-el">INCREASE</button>
7
<button class="btn reset-el">RESET</button>
8
<button class="btn decrease-el">DECREASE</button>
9
</div>
10
</div>
It’s a program to perform a counter which increases, decreases, and reset the count from 0, but the output that I am getting is only increasing with a negative sign
i access classes inside if statement directly. is it possible to directly access classes without using event objects.
Advertisement
Answer
Added values in button and used switch/case
JavaScript
1
33
33
1
let count = 0;
2
let counter = document.querySelector("#number-el");
3
let btns = document.querySelectorAll(".btn");
4
let decreaseEl = document.querySelector(".decrease-el");
5
let increaseEl = document.querySelector(".increase-el");
6
7
btns.forEach(function(btn) {
8
btn.addEventListener("click", function(e) {
9
switch (e.target.value) {
10
case "INCREASE":
11
count++;
12
break;
13
case "DECREASE":
14
count--;
15
break;
16
case "RESET":
17
count = 0;
18
break;
19
default:
20
break;
21
}
22
if (count < 0) {
23
counter.style.color = "green";
24
}
25
if (count > 0) {
26
counter.style.color = "red";
27
}
28
if (count === 0) {
29
counter.style.color = "yellow";
30
}
31
counter.textContent = count;
32
});
33
});
JavaScript
1
10
10
1
<div class="container">
2
<div>
3
<p id="counter-el">COUNTER
4
<div id="number-el">0</div>
5
</p>
6
<button class="btn increase-el" value="INCREASE">INCREASE</button>
7
<button class="btn reset-el" value="RESET">RESET</button>
8
<button class="btn decrease-el" value="DECREASE">DECREASE</button>
9
</div>
10
</div>