Bonjour à tous,

Récemment, on m'a aidé à concevoir une animation qui permet de télécharger un fichier au hasard. Je souhaiterais ajouter une fonctionnalité à ce code :
Un compteur de clic. Ce compteur me permettrait de voir la popularité des téléchargements de chaque fichier (6 au total). Dans l'idéal il serait lié à ma base de donnée.
J'aimerais qu'au clic ça appel une page PHP qui va faire +1 en BDD.

Mon problème : Je n'arrive pas à trouver des tutoriels recents, les seuls qui m'intéressent utilisent des vieilles méthodes obsolètes.

Je vous montre mon code, si jamais quelqu'un a connaissance d'un tutoriel RECENT qui puisse s'adapter à mon code..

Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
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
<div class="hasard-choix anim-f">
            <a href="#">
              <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1"
                preserveAspectRatio="xMinYMin">
                <use xlink:href="#img-question"></use>
              </svg>
              <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1"
                preserveAspectRatio="xMinYMin">
                <use xlink:href="#img-question"></use>
              </svg>
              <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1"
                preserveAspectRatio="xMinYMin">
                <use xlink:href="#img-question"></use>
              </svg>
            </a> 
           </div>
 
<div class="hasard-choix anim-g">
            <a href="#">
              <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1"
                preserveAspectRatio="xMinYMin">
                <use xlink:href="#img-question"></use>
              </svg>
              <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1"
                preserveAspectRatio="xMinYMin">
                <use xlink:href="#img-question"></use>
              </svg>
              <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1"
                preserveAspectRatio="xMinYMin">
                <use xlink:href="#img-question"></use>
              </svg>
            </a> 
          </div>

Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
function melanger(tableau) {
        for (let i = tableau.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          const element = tableau[i];
          tableau[i] = tableau[j];
          tableau[j] = element;
        }
      }
 
      const ar_liens = ["images/test1.zip", "images/test2.zip", "images/test3.zip"];
      const ar_liens2 = ["images/test4.zip", "images/test5.zip", "images/test6.zip"];
 
      const dureeRafrRef = 1000 / 25;
*
      function groupe(liens, parent) {
        let nombClig = 10;
        const ob_cont = document.querySelector(parent);
        const ob_lien = ob_cont.querySelector("a");
        ob_lien.onclick = ev => ev.preventDefault();
        const nl_images = ob_cont.querySelectorAll("svg");
 
        const ar_ordreIndexClig = [];
 
        for (let i = nl_images.length - 1; i >= 0; i--) {
          ar_ordreIndexClig[i] = i;
          const index = i;
          nl_images[i].onclick = function () {
            for (const ob_image of nl_images) {
              ob_image.onclick = null;
            }
 
            let compteur = 0;
            let decalage = 0;
            melanger(ar_ordreIndexClig);
            while (ar_ordreIndexClig[decalage] !== index) {
              decalage++;
            }
 
            let delai = 0;
            const ob_imageClic = this;
            let ob_imageClig = null;
 
            window.requestAnimationFrame(function animation() {
              const tempEcouleNouv = performance.now();
              const dureeRafr = Math.min(tempEcouleNouv - tempsEcoule, dureeRafrRef);
              tempsEcoule = tempEcouleNouv;
 
              if ((delai -= dureeRafr) <= 0) {
                if (nombClig > 0) {
                  nombClig--;
                  if (ob_imageClig !== null) {
                    ob_imageClig.style.visibility = "";
                  }
                }
                let i =
                  ar_ordreIndexClig[(compteur + decalage) % ar_ordreIndexClig.length];
                if (nombClig === 0) {
                  while (nl_images[i].style.visibility === "hidden") {
                    compteur++;
                    i =
                      ar_ordreIndexClig[
                        (compteur + decalage) % ar_ordreIndexClig.length
                      ];
                  }
                }
                (ob_imageClig = nl_images[i]).style.visibility = "hidden";
                if (++compteur >= ar_ordreIndexClig.length) {
                  compteur = 0;
                  melanger(ar_ordreIndexClig);
                  decalage = Number(ar_ordreIndexClig[0] === i);
                }
                delai = 2 * dureeRafrRef;
              }
 
              for (const ob_image of nl_images) {
                if (ob_image.style.visibility !== "hidden") {
                  window.requestAnimationFrame(animation);
                  return;
                }
              }
 
              nl_images[(nl_images.length - 1) * 0.5].style.visibility = "";
 
              const lien = liens[index];
              ob_lien.href = lien;
              ob_lien.onclick = null;
              ob_lien.download = lien.substr(lien.lastIndexOf("/") + 1);
              ob_lien.click();
            });
 
            let tempsEcoule = performance.now();
          };
        }
      }
 
      groupe(ar_liens, ".anim-g");
      groupe(ar_liens2, ".anim-f");

Merci de m'avoir lu