Mon script ne marche pas? [Résolu]

Signaler
Messages postés
123
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
21 février 2021
 -
Messages postés
123
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
21 février 2021
 -
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

3 réponses

Réponse 1 / 3
Messages postés
31456
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 février 2021
 3 277
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);
}

Réponse 2 / 3
Messages postés
123
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
21 février 2021
 1
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 ?
Signaler
Messages postés
31456
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 février 2021
 3 277
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
Réponse 3 / 3
Messages postés
123
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
21 février 2021
 1
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 !
Répondre Posez votre question