Page 1 sur 1

Formulaire qui ne s'affichent pas au clic sur bouton

Posté : 30 juil. 2020, 10:35
par ab1011
Bonjour, Quand je clique sur le bouton, le formulaire ne s'affichent pas. Voici mon code :

index.html

Code : Tout sélectionner

<!DOCTYPE html>

<html lang="fr">

<head>
  <title>Correspondance américaine d'une note de musique</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script type="text/javascript" src="js/script.js"></script>
</head>

<body>
  <div id="wrapper">
    <header>
      <h1>Correspondance américaine d'une note de musique</h1>
    </header>

    <main>
      <input type="button" id="notation" value="notation">
    </main>
  </div>
</body>

</html>
js/script.js

Code : Tout sélectionner

(function() {

  var poster = {

    init: function() {

      window.addEventListener("load", function(event) {

        var notation = document.getElementById("notation");

        var backgroundColor1 = "green";
        var color1 = "white";

        function setBackgroundColor1(element) {

          element.style.backgroundColor = backgroundColor1;
        }

        function setColor1(element) {

          element.style.color = color1;
        }

        notation.addEventListener("click", function(event) {

          setBackgroundColor1(this);
          setColor1(this);
          
          var form = document.createElement("form");
          var label = document.createElement("label");
          var select = document.createElement("select");
          var paragraphe = document.createElement("p");
          
          form.appendChild(label);
          label.appendChild(select);
          form.appendChild(paragraphe);

          document.getElementsByTagName("main").appendChild(form);

          var notes = {

            "" : "",
            "C" : "Do",
            "D" : "Re",
            "E" : "Mi",
            "F" : "Fa",
            "G" : "Sol",
            "H" : "La",
          };

          for(var key in notes) {

            var option = document.createElement("option");
            option.value = key;

            option.textContent = notes[key];
            select.appendChild(option);
          }

          select.addEventListener("change", function() {

            paragraphe.textContent = "La notation américaine pour la note " +
            select.options[this.selectedIndex].textContent + " est " + this.value;
          });
        });
      });
    }
  };

  poster.init();
})();
Merci pour votre aide & bonne journée

Re: Formulaire qui ne s'affichent pas au clic sur bouton

Posté : 03 août 2020, 10:40
par webmaster
Bonjour,

La console indique une erreur sur la ligne

Code : Tout sélectionner

document.getElementsByTagName("main").appendChild(form);
C'est logique, getElementsByTagName retourne un tableau (il y a un s a getElements)
il faut donc écrire :

Code : Tout sélectionner

document.getElementsByTagName("main")[0].appendChild(form);