Création de variables dans une boucle

Résolu/Fermé
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 - 20 nov. 2022 à 12:47
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 - 20 nov. 2022 à 17:08

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 !
 

A voir également:

3 réponses

emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
Modifié le 20 nov. 2022 à 17:09

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 !

1
jordane45 Messages postés 38404 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 février 2025 4 732
20 nov. 2022 à 13:40

Bonjour

Pour commencer, que t'affichent les console.log ?

Et puis, quelle variable n'arrive pas à incrémenter ??


0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
20 nov. 2022 à 16:56

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 !)

0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
20 nov. 2022 à 16:57

J'aimerai savoir comment créer autant de document.createElement('div');  dans ma boucle for que l'utilisateur à selectionné de jours pour son séjour...

0