Element du DOM null

Pierre21
Javascript React

Bonjour à tous et merci de me lire,

Je cherche à créer une image 20 fois par le biais d'une boucle for, puis de l'appendchild à un élément de mon DOM. Mais celui-ci semble être null.
Je suis en formation (un peu perdu) et je crois comprendre que le problème se trouve dans le principes de base que j'ai du mal saisir, on dirait que je vais chercher un élément du DOM qui n'est pas encore exsitant (problème d'asynchronité ?). Mon code ci-dessous :

    const foxContainer = document.getElementById('fox-container');

            for (let i = 0; i < 20; i++) {

        const img = document.createElement("img");
        img.src = fox;
        img.className = 'logo-fox-banniere fox-'+i;
        foxContainer.appendChild(img);
        console.log(img);
        console.log(foxContainer);

    }

5 réponses

popotte

Hello, fais voir ton HTML aussi?

Peut être que ton JS se charge trop vite, si tu écris ton JS directement dans ton HTML utilises un event load et fou ton code dedans, si tu utilises un fichier js externe rajoutes l'attribut defer dans ta balise script :p

Pierre21
Auteur

Et bien mon HTML c'est juste ça, 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>PullDog</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Ensuite React fait le reste en appelant mon app.js dans ma div root, qui appelle mon composant Home. Et je pense que mon erreur est là, puisque ma boucle for se situe au début de mon composant Home, avant même que je créé ma div fox-container... 

const Home = () => {

    const foxContainer = document.getElementById('fox-container');

            for (let i = 0; i < 20; i++) {

        const img = document.createElement("img");
        img.src = fox;
        img.className = 'logo-fox-banniere fox-'+i;
        // foxContainer.appendChild(img);

    }

    return (
        <div className="fox-container"></div>
    )

Je peux demander a ma boucle for de s'éxécuter après que mon return soit terminé ?

Merci pour votre temps !

popotte

ah okay c'est du React x)

Okay alors c'est bien comme tu dis, ta boucle se lance alors que fox-contaienr n'existes pas encore

Alors en gros il faut faire tun truc du genre:

const Home = () => {
    let images

    for (let i = 0; i < 20; i++) {
       const img = document.createElement("img");
       img.src = fox;
       img.className = 'logo-fox-banniere fox-'+i;

       images += img
    }

    return (
        <div className="fox-container">
            {images}
        </div>
    )
}

Un truc dans le genre, la variable images aura une liste d'éléments img et tu le places direct dans le jsx

khalil21

Je pense que ce bout de code fonctionnera dans ton cas. Penses juste à modifier le src de l'image puisque je n'arrive pas à comprendre d'ou vient la variable fox.

const Home = () => {
  return (
    <div className="fox-container">
      {[...Array(20).keys()].map((nb) => (
        <img key={nb} src={'fox'} className={`logo-fox-banniere fox-${nb}`} />
      ))}
    </div>
  );
};
Pierre21
Auteur

Bonjour à tous, merci beaucoup pour vos réponses !
Ca fonctionne parfaitement comme ça, je vais essayer de comprendre par moi même et d'avoir le reflexe de l'utiliser, merci encore !