Création de variables dans une boucle

Résolu
emrh Messages postés 427 Date d'inscription   Statut Membre Dernière intervention   -  
emrh 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 !
 

A voir également:

3 réponses

emrh Messages postés 427 Date d'inscription   Statut Membre Dernière intervention   20
 

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 38484 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 

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   Statut Membre Dernière intervention   20
 

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   Statut Membre Dernière intervention   20
 

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