Création de boutons dynamiques dans une boucle for

**Jmeuh** · 28/04/2021, 11h23

Bonjour,

Désolé je ne savais pas trop quoi mettre dans le titre.

Je m'explique. Je fait une bar de recherche sans module.

Je capture la saisie avec "keyup" puis je cherche dans ma liste si une occurrence est trouvée.
Une div de résultat me retourne les correspondances.
Je veux pouvoir cliquer sur une de ces correspondances, ce qui remplira mon input et servira de référence pour filtrer ma recherche.

Voici la partie qui me pose problème

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
var choiceNames = document.getElementsByClassName('choice-name')
for(var k=0; k<choiceNames.length; k++) {
  choiceName = document.getElementById(choiceNames[k].getAttribute('id'))
  choiceName.addEventListener('click', function() {
    console.log("id => "+choiceName.getAttribute('id'))
    input.value = choiceName.innerText
    result.innerHTML = null
  })
}

Lorsque je clique sur un des boutons générés par javascript le script prends le dernier bouton en référence.
Je devine que c'est à cause du addEventListener qui ce trouve dans une boucle Mais je ne vois pas comment faire.

Si besoin voici le code complet

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
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
<?php
$names = [
  "HABER", "GROUX", "JUMEAU", "COGNEAU", "COGNEAU", "LE", "BEAU", "GIROUARD",
  "POLLUCHE", "LEBEAU", "ROULLIER", "MARAIS", "SINSONNES", "MARTIN", "ROSSE",
  "SÉGRÉTAIN", "HUET", "SINSONNET", "MARTIN", "GAGER", "LAMBERT", "MENEAU", "COUILLIN",
  "LAMBERT", "TUFFÉ", "CLEREAU", "CHAUVEAU", "PAUTONNIÉ", "LEBEAU", "COGNEAU",
  "SÉGRÉTAIN", "BURON", "ESNAULT", "HABER", "VEDYE", "HUBERSON", "MARTIN", "DE", "TOUCHE",
  "DUCOEURJOLLY", "CRÉPEAU", "PERSON", "MARAIS", "JAMET", "JAMET", "HUBERSON", "BULLOU", "POUCE",
  "BULLOU", "PRÉVILLE", "PRÉVILLE", "PRÉVILLE", "PRÉVILLE", "BULLOU", "PAUCÉ", "PRÉVILLE",
  "DALPOT", "RENONCET", "PRÉVILLE", "DALPOT", "RENONCET", "MENOU", "MENOU", "MERCIER",
  "GESLAIN", "JACQUAI", "GESLAIN", "JOUI", "PIPEREAU", "HUET", "HABER", "JACQUET",
  "FERAUD", "SOUCHAY", "MERCIER", "MENOU", "JOUIN", "PIPEREAU", "HOUDÉE", "ISAMBERT","RICHER"
]
?>
 
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type="text" id="input" name="" value="">
    <input type="hidden" id="list" name="" value="<?php foreach($names as $name){echo $name.' ';} ?>">
    <div class="" id="result"></div>
  </body>
</html>
<script type="text/javascript">
var list = document.getElementById('list').value.split(' ')
var input = document.getElementById('input')
var result = document.getElementById('result')
 
input.addEventListener('keyup', function() {
  var inputValue = input.value
  result.innerHTML = null
  for(var j=0; j<list.length; j++) {
    if(list[j].toLowerCase().indexOf(inputValue.toLowerCase()) != -1) {
      if(result) {
        resultValue = result.innerText.split('\n')
        if(!resultValue.includes(list[j])) {
          var name = document.createElement('button')
          name.setAttribute('class', 'choice-name')
          name.setAttribute('id', list[j])
          name.innerText += list[j]
          result.appendChild(name)
        }
      }
    }
  }
  if(inputValue == '') {
    result.innerHTML = null
  }
  var choiceNames = document.getElementsByClassName('choice-name')
  for(var k=0; k<choiceNames.length; k++) {
    choiceName = document.getElementById(choiceNames[k].getAttribute('id'))
    choiceName.addEventListener('click', function() {
      console.log("id => "+choiceName.getAttribute('id'))
      input.value = choiceName.innerText
      result.innerHTML = null
    })
  }
})
 
</script>
 
<style media="screen">
#result {
  position: absolute;
  display: flex;
  flex-direction: column;
  background-color: rgba(100,120,100,1);
}
.choice-name {
  border: 1px solid red;
  border: none;
  background-color: rgba(0,0,0,0);
  cursor: pointer;
  color: white;
}.choice-name:hover {
  background-color: rgba(0,0,0,0.5);
}
</style>

**NoSmoking** · 28/04/2021, 18h43

Bonjour,
pas vu le soucis, mais regardé très rapidement !

Pourquoi ne pas affecter la fonction sur le click au moment de la création du <button> ?
Cela pourrait ressembler à

Code :

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
function handleClick() {
  console.log("id => ", this.id);
  input.value = this.innerText;
  result.innerHTML = null;
}
input.addEventListener('keyup', function() {
  var inputValue = input.value
  result.innerHTML = null
  for (var j = 0; j < list.length; j++) {
    if (list[j].toLowerCase().indexOf(inputValue.toLowerCase()) != -1) {
      if (result) {
        resultValue = result.innerText.split('\n')
        if (!resultValue.includes(list[j])) {
          var name = document.createElement('button')
          name.setAttribute('class', 'choice-name')
          name.setAttribute('id', list[j])
          name.innerText += list[j]
          result.appendChild(name)
          // affectation directe ici
          name.addEventListener("click", handleClick);
        }
      }
    }
  }
  if (inputValue == '') {
    result.innerHTML = null
  }
})

Pourquoi ne pas passer par un élément <datalist>, c'est moins fun mais plus light.

Création de boutons dynamiques dans une boucle for

JavaScript

Vue hybride

Discussions similaires

Partager

Partager