fonction qui se lance deux fois au lieu d'une

**nagyp** · 08/08/2020, 16h18

Bonjour à tous.
quand je clique sur le bouton notation, je veut qu'il me propose un formulaire.
c'est bien ce qui ce passe mais le formulaire apparait deux fois.
Je ne trouve pas la raison de ce souci.
est ce que l'un de vous peut m'aider ?

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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Notation américaine</title>
</head>
<body>
 
<input type="button" id="button"  name="button" value="notation" onclick="notes()">
<script src="java1.js"></script>
 
 
</body>
</html>

Code JavaScript :

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
document.getElementById("button").addEventListener("click", function () {
form = document.createElement("form");
label = document.createElement("label");
label.innerHTML = "Trouver la note américaine de : ";
select = document.createElement("select");
form.appendChild(label);
form.appendChild(select);
document.body.appendChild(form);
paragraphe = document.createElement("p");
document.body.appendChild(paragraphe);
 
  const notes = {
    "": "",
    C: "Do",
    D: "Re",
    E: "Mi",
    F: "Fa",
    G: "Sol",
    A: "La",
    B: "Si",
  };
 
  const f = document.createElement("form");
 
  const lab = document.createElement("label");
  lab.textContent = "Trouver la note américaine de : ";
  lab.setAttribute("for", "sel");
 
  const sel = document.createElement("select");
  sel.setAttribute("id", "sel");
  for (let key in notes) {
    let opt = document.createElement("option");
    opt.value = key;
    opt.text = notes[key];
    sel.appendChild(opt);
  }
 
  f.appendChild(lab);
  f.appendChild(sel);
  document.body.appendChild(f);
 
  const p = document.createElement("p");
  document.body.appendChild(p);
 
  sel.addEventListener("change", function () {
    p.textContent =
      this.value != "" ?
      `La notation américaine pour la note ${sel.options[this.selectedIndex].text} est ${this.value}.` :
      "Choisissez une note."
  });
}, {
  once: true
})

**javatwister** · 09/08/2020, 10h38

Enlève ton appel onclick...

fonction qui se lance deux fois au lieu d'une

JavaScript

Discussions similaires

Partager

Partager