Mon script ne marche pas?

Résolu/Fermé
charline159 Messages postés 208 Date d'inscription lundi 14 août 2017 Statut Membre Dernière intervention 22 juin 2022 - 21 févr. 2021 à 11:46
charline159 Messages postés 208 Date d'inscription lundi 14 août 2017 Statut Membre Dernière intervention 22 juin 2022 - 21 févr. 2021 à 13:07
Bonjour, je souhaiterais ajouter une boucle Javascript sur un formulaire, afin de demander l'âge de l'utilisateur. Cependant, mon script ne marche pas et je ne vois pas pourquoi. Pourriez-vous m'indiquer où est l'erreur s'il vous plaît?

<!DOCTYPE html>
<html>

	<head>
		<title>Website</title>		
  		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  		<meta charset="utf-8">
  		<link rel="stylesheet" href="page1style.css" />
	</head>
  
  <body>
    <header>
      <div id="divnav">
        <nav>
            <a href="#home" class="active">Home</a>
            <a href="#news">News</a>
            <a href="#contact">Contact</a>
            <a href="#about">About</a>
            <a href="#search" id="search">
              <!--<form><input type="search"/>--><input type="image" alt="searchcloud" src="cloudsearch2.svg" id="searchcloud"/></form>
            </a>
        </nav>
      </div>

      <div id="divimg">
        <image src="islandCrop.svg" x="0" y="0" id="island" />
      </div>
    </header>
    
    <section>
      <p class='firstparagraph'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus mi odio, sed vulputate diam placerat et. Sed cursus euismod diam a viverra. Integer commodo fringilla massa non pretium.
      </p>

      <p>
       Integer ultrices tempor diam, ac vestibulum enim sagittis quis. In vulputate justo id molestie dictum. Aenean fringilla vel massa vel placerat. In mattis massa nec sem egestas condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lectus ante, blandit vel ultrices ut, faucibus a lorem. Morbi faucibus tempor mi, id efficitur elit dictum ut. 
      </p>

      <p>Aliquam bibendum nibh ex, sed sagittis dolor dignissim ut. Nulla facilisi. Phasellus euismod convallis libero vitae mattis. Cras mattis fringilla semper. Praesent fermentum, ex et dictum scelerisque, velit odio interdum urna, vitae tempus diam nulla quis nibh. Vestibulum vel ornare nibh. Maecenas eu dui metus. Donec luctus, turpis quis blandit faucibus, nisl arcu posuere dui, quis auctor augue nisl quis ligula. Nulla ligula lectus, commodo et suscipit quis, fermentum in nulla. Vivamus congue ipsum purus, id hendrerit nulla maximus quis. Sed non leo eros.
      </p><br/>      
    
      <form action="action.php"> <!-- wrapper flex grid -->

        <h3>Form</h3>

          <!-- 1 NAME -->
          <div id="formname">
            <label for="name">Nom</label>
            <input type="text" id="name" name="name" placeholder="nom" required/>
          </div>


          <!-- 2 AGE -->
          <div id="formage">
            <label for="age">Age</label>
            <select id="age" name="age">          
              <option value="chocolate">0</option>
              <option value= "strawberry">20</option>
            </select>
          </div>        


          <!-- 3 SEXE -->
          <div id="formsexe">
            <label for="sexe">Sexe</label>
              <optgroup id="sexe">          
                <option>
                  <input type="radio" id="sexe" name="sexe" value="H" checked/>
                  <label for="huey">H</label>
                </option>

                <option>
                  <input type="radio" id="sexe" name="sexe" value="F"/>
                  <label for="huey">F</label>
                </option>
              </optgroup>
          </div>


          <!-- 4 LANGUE -->
          <div id="formlangues">
            <label for="langues[]">Langue</label>
            <optgroup id="langues">
              <option>
                <input type="checkbox" id="fr" name="langues[]" value="Franças" checked>
                <label for="langues[]">Fr</label>
              </option>

              <option>
                <input type="checkbox" id="en" name="langues[]" value="English">
                <label for="langues[]">En</label>
              </option>

              <option>
                <input type="checkbox" id="jp" name="langues[]" value="Japonais">
                <label for="langues[]">日本語</label>
              </option>         
            </optgroup>
          </div>


          <!-- 5 LOISIRS -->
          <div id="formloisirs">
            <label id="loisirs">Loisirs</label>
              <select id="loisirs" name="loisirs" multiple>            
                <option value="programmation">Programmation</option>
                <option value= "musique">Musique</option>
                <option value="cinema">Cinéma</option>
                <option value="nuages">Nuages</option>            
              </select>
          </div>



          <!-- 6 COMMENTAIRE -->
          <div id="formcommentaire">
            <label for="commentaire"><!--commentaire--></label>
            <textarea id="commentaire" name="commentaire" placeholder="your message here"></textarea>
          </div>

          <!-- BOUTON -->
          <div id="formenvoyer">
            <input type="submit" value="Envoyer"/>
          </div>
      </form>
    </section>

    <footer>
      <p>
      Copyright 1789-2021 by the Sky. All Clouds Reserved. <img alt="little cloud" src="littlecloud.svg" id="littlecloud" height="20px" width="20px"/>
      </p>
    </footer>

    <script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
    <script src="page1script.js"></script>
  </body>

</html>


require(["validate.js"], function(validate) {
  // ...
});




var age = document.getElementById('age');

age.addEventListener("click", function(){
	for (i=1; i<100; i++){
        document.write(age);
	}
});




Configuration: Windows / Firefox 85.0
A voir également:

3 réponses

jordane45 Messages postés 38269 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 novembre 2024 4 694
21 févr. 2021 à 12:44
Bonjour,

Tu veux créer, via une boucle en javascript, des options dans ton select age ?
<select id="age" name="age">       


Si oui, ce n'est pas document.write qu'il faut utiliser...

var min = 1,
    max = 100,
    select = document.getElementById('age');

for (var i = min; i<=max; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i;
    select.appendChild(opt);
}

1
charline159 Messages postés 208 Date d'inscription lundi 14 août 2017 Statut Membre Dernière intervention 22 juin 2022 1
Modifié le 21 févr. 2021 à 12:48
Bonjour, et merci pour ton aide.

Je viens d'essayer avec ton code, mais je ne vois pas de changement sur ma page web.

J'ai mis ma balise
<script src="script.js"></script>
en fin de document html (juste avant la balise </body> ).

D'où est-ce que le problème pourrait venir ?
0
jordane45 Messages postés 38269 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 novembre 2024 4 694
21 févr. 2021 à 12:51
Déjà, pense bien à vider le cache de ton navigateur.

Ensuite, vérifie que dans ta liste déroulante tu ne vois pas les différentes options ( chiffres allant de 1 à 100 ... )

Si tu ne les vois pas, affiche la console de ton navigatuer, et vérifies que tu n'as pas de message d'erreur.

Peux tu également nous partager le code source généré de cette page ( en faisant CTRL+u une fois ta page affichée et en nous collant le code ici. )
Penses également à nous donner le code COMPLET de ton fichier script.js
0
charline159 Messages postés 208 Date d'inscription lundi 14 août 2017 Statut Membre Dernière intervention 22 juin 2022 1
Modifié le 21 févr. 2021 à 13:07
en fait, c'était la validation JS que j'ai tenté de mettre en fin de document html
( <script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script> ) qui bloquait tout apparemment, et je l'ai désactivé (en attendant de pouvoir le mettre correctement) et ça marche ! Merci à toi !
0