Code-source


00001     // #######################################################################################     

00002          

00003     function histAvecDate(laDescription,laDate,idParent,idEvenement) {     

00004          

00005     // #######################################################################################     

00006          

00007     // on veut produire une division avec une question, une zone pour la saison de la réponse     

00008     // et un champ caché qui contient la réponse     

00009          

00010     // Voici par exemple ce qu'on produit via l'appel  histAvecDate("La bataille de Marignan","1515","exoHist","exoHist1")     

00011          

00012     // ###     <div id="exoHist1">     

00013     // ###     

00014     // ###        <blockquote>     

00015     // ###           <p>&nbsp;Evènement&nbsp;:     

00016     // ###              <b><span id="exoHist1question">La bataille de Marignan</span></b>     

00017     // ###              &nbsp;;&nbsp;sa Date&nbsp;?&nbsp;     

00018     // ###              <input type="text" id="exoHist1reponse" />     

00019     // ###              <input type="hidden" id="exoHist1solution" value="1515 "/>     

00020     // ###           </p>     

00021     // ###        </blockquote>     

00022     // ###     

00023     // ###     </div>     

00024     // ###     

00025     // ###     

00026          

00027     // Etape 1 : on crée un élément <div> et on prépare les trois id pour la question, la réponse et la solution     

00028          

00029       uneDiv = document.createElement("div")     

00030       uneDiv.setAttribute("id",idEvenement)     

00031          

00032       idQuestion = idEvenement + "question"     

00033       idReponse  = idEvenement + "reponse"     

00034       idSolution = idEvenement + "solution"     

00035          

00036     // Etape 2 : on remplit le paragraphe ; on utilise .innerHTML pour plus de concision dans le code     

00037          

00038       contenuHTML  = "<blockquote>"     

00039       contenuHTML += "<p>"     

00040       contenuHTML += "&nbsp;Evènement&nbsp;: "     

00041       contenuHTML += "<b><span id='" + idQuestion + "'>" + laDescription + "</span></b>"     

00042       contenuHTML += "&nbsp;;&nbsp;sa Date&nbsp;?&nbsp;"     

00043       contenuHTML += "<input type='text'   id='" + idReponse  + "' />"     

00044       contenuHTML += "<input type='hidden' id='" + idSolution + "'value='" + laDate + " '/>"     

00045       contenuHTML += "</p>"     

00046       contenuHTML += "</blockquote>"     

00047          

00048       // pour comprendre ce qui est produit, il faut décommenter la ligne suivante :     

00049       // console.log(contenuHTML)     

00050          

00051       uneDiv.innerHTML += contenuHTML     

00052          

00053     // Etape 3 : il reste à insérer la division dans la page     

00054          

00055       document.getElementById(idParent).appendChild(uneDiv)     

00056          

00057     } // fin de fonction histAvecDate
Listing du fichier exHistoire.js
