btn = document.getElementsByClassName('btn');
value = document.getElementById('value');
let counter = 0;
btn[2].addEventListener('click', function() {
if (btn[2].classList.contains('decrease')) counter -= 1;
if (btn[2].classList.contains('reset')) counter = 0;
if (btn[2].classList.contains('increase')) counter += 1;
value.innerText = counter;
});/*
===============
Fonts
===============
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
/*
===============
Variables
===============
*/
:root {
/* dark shades of primary color*/
... (variables continue)
...<!DOCTYPE html>
<html lang="en">
<head>
...(head section continues)...
...</head>
<body>
...(body section continues)...
... </body>
</html>It seems that the issue lies in the JavaScript code snippet. When clicking on the increase button with index 2, the value doesn't increase as expected.
btn = document.getElementsByClassName('btn');
btn[2].addEventListener('click', function() {
if (btn[2].classList.contains('decrease')) counter -= 1;
if (btn[2].classList.contains('reset')) counter = 0;
if (btn[2].classList.contains('decrease')) counter += 1;
value.innerText = counter;
});