fonction qui se lance deux fois au lieu d'une

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:

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:

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
})