Problème avec interruption de boucle for

Bonjour à tous,

je suis actuellement aux prises avec une boucle Javascript que je n'arrive pas à dompter, je m'essaye au Javascript depuis peu...

Voici la boucle, elle est utilisée pour créer des formes sur un site qui apparaissent au fur et à mesure qu'on descend :

for (let i = 1; i < 4900; i++) {
  const div = document.createElement('div');
  div.classList.add('forme');
  document.body.appendChild(div);
  }

J'ai donc une div qui est créé 4900 fois et qui s'affiche correctement. C'est super, sauf que quand je ne suis plus sur mon écran 2K (1080p ou téléphone) et bien la boucle se répète aussi 4900 fois et dépasse allègrement au delà de la fin de ma page. Vu la fonction tapée je comprends que c'est tout à fait normal.

Je me demande comment faire pour soit remplacer la valeur de "4900" par une valeur qui ferait la hauteur du DOM ou alors ajouter un "if (atteind le footer) {break}".

J'ai fouillé le net pendant des heures, essayé des tas de trucs sans trouver de solution adaptée.
Modifié par captainkuru (20 Mar 2022 - 12:03)

Salut,

Qu'est-ce que tu entends par "la hauteur du DOM" ? L'a auteur de l'écran ? La hauteur de ta page avec le scroll ? 4900 ca représente quoi ici ? Pourquoi 4900 ca passe sur PC et pas ailleurs ?

Sinon oui tu peux déterminer ton max en fonction de la hauteur d'un truc oui. Suffit d'utiliser une autre variable que tu aura rempli avant.

let max = 4900; // ou ce que tu veux. Joue avec un if pour gérer plusieurs cas.
for (let i = 1; i < max; i++) {

Bonjour,

merci de m'avoir répondu.

En fait cette boucle me permet de créer ici, parce que je l'ai réglé sur cette valeur, 4900 div, qui comprennent une forme codée en css qui se déforme légèrement au fur et à mesure. Cela crée une trainée au fil du scroll comme un coup de pinceau qui se tracerait quand on descend sur la page.

Mais cette fonction simple (je suis débutant en Javascript) est imparfaite car avec la valeur 4900, mon trait de div arrive bien jusqu'au footer et s'arrête, mais le 4900 n'est pas adapté à d'autres formats d'écrans que mon 1440p. En 1080p ou sur téléphone après réorganisations css en flex column, le trait descend bien plus bas que le footer car la fonction veut absolument aller jusqu'à 4900 itérations (logique) Il faudrait que la boucle s'arrête juste avant le footer.

Je suis en train de regarder ce que tu m'as gentiment envoyé pour faire un let max = "hauteur d'une section html".

Si je pige bien le fonctionnement de Javascript

Je déclare une fonction qui dit en gros "hauteur = section Html.height"
let max = hauteur
for (let i = 1; i < max; i++) { le reste de la fonction}

Alors je t'avoue que j'ai encore du mal à me représenter ce que tu veux dire.

a écrit :
la valeur 4900, mon trait de div arrive bien jusqu'au footer et s'arrête, mais le 4900 n'est pas adapté à d'autres formats d'écrans que mon 1440p.

Pourquoi 4900 tombe bien ? Ton site fait 4900px de haut ou un truc dans le genre ?

Si tu peux reproduite ton code sur https://jsfiddle.net/ par exemple ca m'intéresse de voir ça (ou alors 'il est déjà en ligne quelquepart).

Apres pour ta proposition oui c'est un truc du genre mais pas besoin de "fonction". Juste directement max = Html.height enfin selon ce que tu veux en max en fait. En vrai Js un truc du genre :

max = document.getElementById('coucou').offsetHeight;

Mais comme je ne comprends pas la relation entre le nombre d'élément et la hauteur de l'écran (ou site ca non plus je sais pas) j'ai du mal à te guider plus (d'ou ma premiere question)
Modifié par _laurent (21 Mar 2022 - 15:03)

J'ai essayé ça :

var hauteur = document.getElementById('contenu').offsetHeight;
console.dir(hauteur)
let max = hauteur
for (let i = 1; i < max; i++) { reste de la fonction }

Je mesure la hauteur de la div id="contenu"
Je récupère cette valeur dans le let max = que tu m'as suggéré et miracle mon trait de peinture ne dépasse plus du footer !

Bon je suppose qu'il y a mieux car en fonction des différents écrans le trait ne s’arrête pas au même endroit. Quelle frustration de ne pas savoir coder du Javascript !!!!!!!!

Je n'avais pas vu ta réponse.

J'ai créé en faisant une superposition de div une forme qui se crée en cours de scroll. Mais il faut le bon nombre de div, sinon la forme est soit trop courte, soit trop longue...

Le fait que la fonction crée 4900 div fait que mon trait se termine au bon endroit juste avant le footer sur mon écran 2K. Mais une fois au format téléphone par exemple, j'ai des éléments qui passent du flex row en column etc, le DOM est fatalement "différent en hauteur en pixel" et les 4900 div continuaient à se former au delà du footer et agrandissait le documents après le dit footer, ce qui évidemment était abominable. Il aurait fallu une valeur de 4000 seulement...

Le fait de mesurer la hauteur de la page et d'adapter "le 4900" dynamiquement fait que le nombre de div crée est suffisant pour aller jusqu'en bas de la page sans dépasser en dessous du footer.

Je mettrais en ligne cette page bientôt. J'indiquerai l'adresse ici.
Modifié par captainkuru (21 Mar 2022 - 15:29)

Oui mais pourquoi 4900 tombe bien ? Tu place 1 div tout les 2px et ta page fait 9800px de haut ? Un truc dans le genre ?

Si tu n'arrives pas a connaitre cette relation comment tu peux adapter ce nombre à la hauteur sur les différent média ?

Sinon pour ton exemple oui c'est tout a fait ça. Avec quelques lignes inutiles en moins :

var hauteur = document.getElementById('contenu').offsetHeight;
for (let i = 1; i < hauteur; i++) { reste de la fonction }