Création de variables dans une boucle
Résoluemrh Messages postés 427 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
J'ai deux input date qui me servent à définir un début et une fin d'un séjour.
J'aimerai pouvoir créer dans une boucle autant de DIV qu'il y a de jours dans la durée du séjour...
Je n'arrive pas à incrémenter une variable dans cette boucle, mais peut être existe t-il une méthode plus simple ?
//############### CONTRÔLE DES DATES DÉBUT/FIN DU CALENDRIER ############## const dateDebut = document.querySelector('#date_debut'); const dateFin = document.querySelector('#date_fin'); dateDebut.addEventListener('change', () => { // Si la date de début est supérieur à celle de fin : if (dateFin.valueAsNumber < dateDebut.valueAsNumber){ // On vide le champ date_fin dateFin.value = null; } // S'il y a bien une valeur dans date_debut : if (dateDebut.value){ // On défini la date minimum de date_fin à celle de date_debut dateFin.min = dateDebut.value; } else { // Sinon on retire cette limite minimum dateFin.min = null; } calculSejour(); }); dateFin.addEventListener('change', () => { calculSejour(); }); function calculSejour(){ // Calcul du nombre de jour su séjour : if(dateDebut.value !== null && dateFin.value !== null){ var x = new Date(dateDebut.value); var y = new Date(dateFin.value); // secondes = millisecondes/1000 // minutes = secondes/60 // heures = minutes/60 // Jours = heures/24 var dureeSejour = Math.floor((y - x) / (1000 * 60 * 60 * 24)); if (isNaN(dureeSejour)) dureeSejour = 0; console.log('Début : ' + dateDebut.value); console.log('Fin : ' + dateFin.value); console.log('Durée séjour : '+ dureeSejour); } // Création de la zone de saisie des taxes journalières : if(dureeSejour>=1){ var containerTs = document.createElement('div'); for (i = 1; i <= dureeSejour; i++) { // Création d'une ligne TS par jour : let text1 = "div"; let text2 = i; let result = text1.concat(text2); result = document.createElement('div'); result.setAttribute('id', 'jour_' + i); result.appendChild(document.createTextNode('DIV N°' + i)); result.appendChild(containerTs); } document.getElementById("composition-ts").appendChild(containerTs); } // Suppression de la zone de saisie des taxes journalières : else { document.getElementById('composition-ts').innerHTML = ""; } }
Vous auriez une idée ?
Merci d'avance pour votre aide !
J'ai essayé avec des Array également, ça ne fonctionne pas plus !
- Création de variables dans une boucle
- Creation de compte google - Guide
- Creation de site web - Guide
- Creation compte gmail - Guide
- Media creation tool - Télécharger - Systèmes d'exploitation
- Creation compte vinted - Guide
3 réponses
En faisant des essais je viens de me rendre compte qu'il n'était pas nécessaire d'incrémenter ma div dans la boucle for...
J'essayais depuis un moment de faire des
for (i = 1; i <= dureeSejour; i++) {
// Création d'une ligne TS par jour :
var div[i] = document.createElement('div');
div[i].setAttribute('id', i);
div[i].setAttribute('class', 'droite');
div[i].setAttribute('data-label', 'TOTAL');
div[i].appendChild(document.createTextNode('test'+i));
document.getElementById("composition-ts").appendChild(div[i]);
}
Alors qu'il suffisait de faire simplement :
for (i = 1; i <= dureeSejour; i++) {
// Création d'une ligne TS par jour :
var div = document.createElement('div');
div.setAttribute('id', i);
div.setAttribute('class', 'droite');
div.setAttribute('data-label', 'TOTAL');
div.appendChild(document.createTextNode('test'+i));
}
document.getElementById("composition-ts").appendChild(div);
Désolé pour le dérangement !
Bonjour
Pour commencer, que t'affichent les console.log ?
Et puis, quelle variable n'arrive pas à incrémenter ??
Bonjour Jordan,
Dans la console j'ai :
Début : 2022-11-14
Fin : 2022-11-20
Durée séjour : 6
Donc le traitement des infos saisies par l'utilisateur fonctionne bien...
Quand je regarde l'inspecteur d'éléments, je vois bien la DIV <div id="composition-ts">
se remplir d'une nouvelle <div></div>...Mais d'une seule !
Je voudrais que mon code en créé 6 (selon les dates entrées en fait !)