Je suis nouveau dans la programmation et je travaille avec une table sur otree où 256 boutons différents sont affichés en utilisant Javascript. Chaque bouton dévoile une icône qui est rappelée par une simple fonction.

Dans cette fonction, j'ai installé un simple compteur de clics qui augmente de un à chaque fois qu'un bouton est cliqué. Le compteur de clics simple fonctionne bien (ce n'est pas mon problème) :)

La table:

for(var r = 0; r < rows;r++)
    {
        table += '<tr>';
        for(var c= 0; c< cols;c++)
        {
            var random = Math.floor(Math.random() * nums.length);
            table += '<td style="width:50px">' + '<button id="' + nums[random] + '" type="button" onclick="displayImage(this.id)">' + "show me" + '</button>' + '</td>';
            nums.splice(random, 1);
        }
        table += '</tr>';
    }

La fonction:

function displayImage(num){
    document.canvas2.src = '{% static "bottone/'+ imagesArray[num]+ '.png" %}';
    document.getElementById("YourImage2").style.visibility = "visible";
    onClick();
}

Le compteur:

var clicks = 0;
function onClick() {
    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
 };

Tout va bien jusqu'à ici, il y a un champ HTML caché et j'arrive à enregistrer la valeur du compteur lorsque l'utilisateur clique sur le bouton "suivant" ...

Mon problème est le suivant: ce compteur compte le nombre de boutons sur lesquels vous avez cliqué, cependant, je voudrais qu'il ne compte que le nombre de fois où un bouton est cliqué pour la première fois (peut varier de 0 à 256) tout en permettant aux utilisateurs de cliquer plusieurs fois sur le même bouton. Je suis sûr que cela peut être très simple mais je ne sais pas par où commencer ...

1
Manfredi Danielis 17 janv. 2017 à 13:22

2 réponses

Meilleure réponse

Vous pouvez suivre pour chaque bouton s'il a déjà été cliqué auparavant et, dans ce cas, ne pas compter le clic.

Votre fonction onClick ressemblerait à ceci (notez que vous devez lui transmettre l'identifiant du bouton cliqué):

var clicks = 0;
function onClick(id) {
    var clickedEl = document.getElementById(id);
    if (clickedEl.dataset.wasClicked) {
        return;
    }
    clickedEl.dataset.wasClicked = true;
    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
 }
1
Giladd 17 janv. 2017 à 11:09

Voici un exemple simple de JSFiddle:

HTML:

<button onclick="buttonClicked(event)">
New 1
</button>
<button onclick="buttonClicked(event)">
New 2
</button>
<button onclick="buttonClicked(event)">
New 3
</button>

<div id="counter">0
</div>

JS:

var clickedList = [];
var counter = 0;

function buttonClicked(event){
    if (clickedList.indexOf(event.currentTarget) === -1){
    clickedList.push(event.currentTarget);
    counter++;
    document.getElementById("counter").innerHTML = counter;
    console.log(counter);
  }
}
0
Dellirium 17 janv. 2017 à 11:17