1
votes

Comment définir la fonction onclick avec des variables? Javascript

Je suis assez nouveau dans le développement Web, j'essaie de créer plusieurs boutons dans une fonction javascript et de définir leur fonction onclick dans une boucle for.

Ce que je veux: Lorsque je clique sur le bouton, je souhaite récupérer la valeur associée à ce bouton.

Ce que j'ai: Lorsque je clique sur un bouton, je récupère la valeur associée au dernier bouton.

J'ai fait un exemple simple de ce que j'essaie de faire:

HTML:

const data = [1, 2, 3, 4, 5];
var i;
for (i = 0;i < data.length;i++) {
  const root = document.createElement('button');
  root.setAttribute("class", "exerciceBox");
  root.textContent = i;
  root.onclick = function() {
    console.log(i);
  }
  document.getElementById("container").append(root);
}

JS:

<html>
  <body>
    <div id="container">
    </div>
    <script src="script.js" charset="utf-8"></script>
  </body>
</html>

Je ne sais pas s'il existe un meilleur moyen de déclarer la fonction .onclick pour le bouton créé dans des fichiers JS ou peut-être une autre façon de le faire.

J'espère que vous pourrez m'aider! Merci d'avance, Sincèrement, Valentin

javascript buttonclick

0 commentaires

5 Réponses :

1
votes

Les index commencent à 0 dans js.

const data = [1, 2, 3, 4, 5];

for (let i = 0; i < data.length; i++) {
  const root = document.createElement('button');
  root.setAttribute("class", "exerciceBox");
  root.textContent = i;
  root.onclick = function() {
    console.log(i++); // this prints out i (index) + 1
  }
  document.getElementById("container").append(root);
}

0 commentaires

2
votes

Le problème réside dans l'instruction var et il y a un problème de portée. L'instruction var déclare une variable à portée fonction ou à portée globale. Pour résoudre ce problème, déclarez la variable i par l'instruction let pour maintenir la portée dans la boucle for.

Une solution possible comme ci-dessous

<html>
  <body>
    <div id="container">
    </div>
    <script src="script.js" charset="utf-8"></script>
  </body>
</html>

const data = [1, 2, 3, 4, 5];
for (let i = 0;i < data.length;i++) {
  const root = document.createElement('button');
  root.setAttribute("class", "exerciceBox");
  root.textContent = i;
  root.onclick = function() {
    console.log(i);
  }
  document.getElementById("container").append(root);
}

0 commentaires

0
votes

Vous obtenez toujours la dernière valeur de i car le for l'incrémente jusqu'à la fin de la boucle, puis, lorsque vous cliquez sur le bouton, vous voyez la valeur incrémentée. Essayez ceci:

for (let i = 0; i < data.length; i++) {
    const root = document.createElement('button');
    root.setAttribute("class", "exerciceBox");
    root.textContent = i;
    let thisButtonI = i; //Make a copy of the actual value of i
    root.onclick = function() {
        console.log(thisButtonI); //use the copy, not the original i
    }
    document.getElementById("container").append(root);
}

0 commentaires

1
votes

vous devez ajouter un attribut de valeur à vos boutons, voici comment procéder:

const data = [1, 2, 3, 4, 5];
for (i = 0;i < data.length;i++) {
  const root = document.createElement('button');
  root.setAttribute("class", "exerciceBox");
  // set the value of your button to i
  root.setAttribute("value", i);
  root.textContent = i;
  root.onclick = function() {
  // get the value using 'this' 
  console.log(this.value);
  }
  document.getElementById("container").append(root);
}

0 commentaires

0
votes

Ne créez pas de fonctions à l'intérieur de boucles. Il est sujet aux bogues car une fois la boucle terminée, la fonction peut être remplacée en quittant avec les dernières valeurs de boucle attachées.
Ne modifiez pas le DOM à l'intérieur des boucles - cela provoque un encombrement, un relais inutile et des repeints

Voici une meilleure solution sur la façon de créer une série d'éléments à partir d'un tableau et de les insérer dans le DOM

Créez un plan de votre bouton ( EL_dataItem ) et attribuez les attributs et gestionnaires d'événements nécessaires
Utilisez Array.prototype.reduce () pour réduire votre data Array en une collection DocumentFragment .
Utilisez API DocumentFragment et sa méthode .append ()
Une fois que DocumentFragment est rempli, utilisez Element. append () pour insérer les boutons là où c'est nécessaire - tous à la fois .

<div id="container"></div>

// Helpers
const ELNew = (sel, attr) => Object.assign(document.createElement(sel), attr || {});
const EL = (sel, EL) => (EL || document).querySelector(sel);

// Your data Array
const data = [1, 2, 3, 4, 5];

// Button Blueprint
const EL_dataItem = (item) => ELNew("button", {
  type:        "button",
  className:   "exerciceBox", // cice?..
  textContent: item,
  onclick()    { console.log(item); },
});

// Create all buttons (Append into DocumentFragment)
const DF_items = data.reduce((DF, item) => {
  DF.append(EL_dataItem(item));
  return DF;
}, new DocumentFragment());

// Append DocumentFragment once.
EL("#container").append(DF_items);

0 commentaires