Création de variables dans une boucle
Résoluemrh Messages postés 439 Statut Membre -
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 !
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 : 6Donc 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 !)