How to addClass when button was clicked more than X times

October 25, 2022

I followed this tutorial;
Work fine but now i try to change background-color of the page when the button was clicked more than X times (10 for exemple).

I’m trying to addclass with IF like this :

var i = 10;

if (i < data.length) {
  document.getElementById('first').classList.add("achieved");
}

#first.achieved { background-color: green; }

<html>
  <head>
    <meta charset="utf-8">
    <title>Node + Express + MongoDb example</title>
  </head>
  <body>
  <div id="first">
    <h1>Node + Express + MongoDb example</h1>
    <p id="counter">Loading button click data.</p>
    <button id="myButton">Click me!</button>
    </div>
  </body>
  <script src="client.js"></script>
</html>

but nothing happen ! So can u help me ?

In case you were wondering where data.length comes from, it’s here

the code that either informs the backend that there has been a click :

// Replace the URL below with the URL for your database
const url =  'URLDATABASE';

MongoClient.connect(url, (err, database) => {
  if(err) {
    return console.log(err);
  }
  db = database;
  // start the express web server listening on 8080
  app.listen(8080, () => {
    console.log('listening on 8080');
  });
});

// serve the homepage
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

// add a document to the DB collection recording the click event
app.post('/clicked', (req, res) => {
  const click = {clickTime: new Date()};
  console.log(click);
  console.log(db);

  db.collection('clicks').save(click, (err, result) => {
    if (err) {
      return console.log(err);
    }
    console.log('click added to db');
    res.sendStatus(201);
  });
});

// get the click data from the database
app.get('/clicks', (req, res) => {
  db.collection('clicks').find().toArray((err, result) => {
    if (err) return console.log(err);
    res.send(result);
  });
});

// change backgorund-color

UPDATE :
I Solve the problem, i just forgot to link my CSS and my HTML … i’m really stupid !

>Solution :

Short Answer

You can do such a thing with the closures.

Function Description

In this approach, you have to create a parent function which is responsible to hold the count and a sub-parent function which is returned by its parent to increase the value of the count by 1 and then check if it’s equal to 10 or not.

const button = document.querySelector('#myButton');

function clickCount() {
  const countElement = document.getElementById('count');
  let count = 0

  return function countPlusOne() {
    count += 1;
    
    countElement.textContent = count;

    if (count === 10) {
      document.getElementById('first').classList.add("achieved");
    }
  }
}

const countPlusOne = clickCount();

button.addEventListener("click", countPlusOne);

#first.achieved {
  background-color: green;
}

<div id="first">
  <h1>Node + Express + MongoDb example</h1>
  <p id="counter">Loading button click data.</p>
  <button id="myButton">Click me!</button>
</div>

<p>Button click count is currently at <span id="count">0</span></p>