Récupérer données chargées dynamiquement

61393
,

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Je bosse actuellement sur un simulateur en plusieurs étapes, comme une sorte d'entonoir en questions / réponses qui afficheront un résultat final. Pour le système à plusieurs étapes, j'utilise jQuery Wizard mais le code qui me permet de gérer mon affichage final est en JavaScript, j'ai d'ailleurs bénéficié de l'aide d'un utilisateur discord (Coucou Onsouris) pour me mettre largement sur la voie.

Le problème c'est que je charge dynamiquemenet le résultat final et du coup je n'arrive pas à récupérer d'informations en JavaScript sur cette partie chargée dynamiquement.

document.addEventListener("DOMContentLoaded", () => {
    let recap = [];
    let result = {
        typeMachine: null,
        formatImpression: null,
        gammeCouleur: null,
        volumeImpression: null
    };
    let $bottomWizard = document.getElementById('bottom-wizard');
    let $recap = document.createElement('div');
    $recap.id = 'selection';
    $recap.innerHTML = '<h3>Votre sélection</h3></div><a id="details-bt" href=""><div id="selection-details"></div></a>';
    $bottomWizard.append($recap);
    let $detailsBt = document.getElementById('details-bt');
    let $orderDetails = document.getElementById('selection-details');
    let $resultDiv = document.getElementById('result');

    document.getElementById('details-bt').addEventListener('click', (event) => {
        event.preventDefault();
    });

    document.querySelectorAll('input[type=radio]').forEach(input => {
        input.addEventListener('change', () => {
            recap = [];

            document.querySelectorAll('input[type=radio]:checked').forEach(inputChecked => {
                recap.push(inputChecked.dataset.label +' : '+ inputChecked.dataset.realname);
                result[inputChecked.name] = inputChecked.value;
            });

            if (recap.length > 0) {
                $detailsBt.classList.add('show');

                let detailsHTML = '<h4>Récapitulatif</h4>';

                recap.forEach(item => {
                    detailsHTML += '- ' + item + '<br />';
                });

                $orderDetails.innerHTML = detailsHTML;
            } else {
                $detailsBt.classList.remove('show');
                $orderDetails.innerHTML = '';
            }

            if(result.typeMachine != null && result.formatImpression != null && result.gammeCouleur != null && result.volumeImpression != null) {
                finalResult = getPrinters(result);

                let resultHTML = '';

                Object.keys(finalResult).forEach(printers => {
                    resultHTML += '<div class="col-lg-4">';
                    resultHTML += '<div class="item">';
                    resultHTML += '<input data-label="Choix de la machine" data-realname="'+ finalResult[printers].reference +'" id="choixMachine_answers_'+ finalResult[printers].idImprimante +'" type="radio" name="choixMachine" value="'+ finalResult[printers].idImprimante +'" class="required">';
                    resultHTML += '<label for="choixMachine_answers_'+ finalResult[printers].idImprimante +'"><span><figure><img src="images/'+ finalResult[printers].image +'" alt=""></figure></span><strong>'+ finalResult[printers].reference +'</strong>'+ finalResult[printers]['vitesse'] +'</label>';
                    resultHTML += '</div>';
                    resultHTML += '</div>';
                });

                $resultDiv.innerHTML = resultHTML;
            }

        });

    });
});
    <main>
        <div class="container">
            <div id="wizard_container">
                <form name="example-1" id="wrapped" method="POST">
                    <input id="website" name="website" type="text" value="">
                    <!-- Leave for security protection, read docs for details -->
                    <div id="middle-wizard">

                        <div class="step">
                            <div class="question_title">
                                <h3>Plutôt imprimante ou photocopieur ?</h3>
                                <p>Sélectionnez le type de machine que vous souhaitez utiliser.</p>
                            </div>
                            <div class="row justify-content-center">
                                <div class="col-lg-4">
                                    <div class="item">
                                        <input data-label="Type de machine" data-realname="Imprimante" id="typeMachine_answer_1" type="radio" name="typeMachine" value="1" class="required">
                                        <label for="typeMachine_answer_1"><span><figure><img src="images/200x200.jpg" alt=""></figure></span><strong>Imprimante</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="item">
                                        <input data-label="Type de machine" data-realname="Photocopieur" id="typeMachine_answer_2" type="radio" name="typeMachine" value="2" class="required">
                                        <label for="typeMachine_answer_2"><span><figure><img src="images/200x200.jpg" alt=""></figure></span><strong>Photocopieur</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
                                    </div>
                                </div>
                            </div>
                            <!-- /row-->
                        </div>
                        <!-- /step -->

                        <div class="step">
                            <div class="question_title">
                                <h3>Quels sont vos formats d'impression ?</h3>
                                <p>Sélectionnez le format d'impression et de numérisation que vous souhaitez utiliser.</p>
                            </div>
                            <div class="row justify-content-center">
                                <div class="col-lg-4">
                                    <div class="item">
                                        <input data-label="Format d'impression" data-realname="A4" id="formatImpression_answer_1" type="radio" name="formatImpression" value="1" class="required">
                                        <label for="formatImpression_answer_1"><span><figure><img src="images/200x200.jpg" alt=""></figure></span><strong>A4</strong>Postea democritum mnesarchum ne nam, ad vim aperiri tractatos.</label>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="item">
                                        <input data-label="Format d'impression" data-realname="A4/A3" id="formatImpression_answer_2" type="radio" name="formatImpression" value="2" class="required">
                                        <label for="formatImpression_answer_2"><span><figure><img src="images/200x200.jpg" alt=""></figure></span><strong>A4/A3</strong>Postea democritum mnesarchum ne nam, ad vim aperiri tractatos.</label>
                                    </div>
                                </div>
                            </div>
                            <!-- /row-->
                        </div>
                        <!-- /step -->

                        <div class="step">
                            <div class="question_title">
                                <h3>Gamme N&B ou Gamme Couleur ?</h3>
                                <p>Souhaitez-vous imprimer et photocopier uniquement en N&B ou avoir la possibilité d'imprimer et de faire des copies en couleur ?</p>
                            </div>
                            <div class="row justify-content-center">
                                <div class="col-lg-4">
                                    <div class="item">
                                        <input data-label="Gamme" data-realname="Couleur" id="gammeCouleur_answer_1" type="radio" name="gammeCouleur" value="1" class="required">
                                        <label for="gammeCouleur_answer_1"><span><figure><img src="images/200x200.jpg" alt=""></figure></span><strong>Couleur</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="item">
                                        <input data-label="Gamme" data-realname="N&B" id="gammeCouleur_answer_2" type="radio" name="gammeCouleur" value="2" class="required">
                                        <label for="gammeCouleur_answer_2"><span><figure><img src="images/200x200.jpg" alt=""></figure></span><strong>Noir&Blanc</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
                                    </div>
                                </div>
                            </div>
                            <!-- /row-->
                        </div>
                        <!-- /step -->

                        <div class="step">
                            <div class="question_title">
                                <h3>Quel est votre volume d'impressions mensuel ?</h3>
                                <p>Afin de déterminer la vitesse du matériel adapté à vos volumes, évaluez la tranche de volume d'impressions / copies mensuels.</p>
                            </div>
                            <div class="row justify-content-center">
                                <div class="col-lg-4">
                                    <div class="item">
                                        <input data-label="Volume d'impressions" data-realname="0 à 500" id="volumeImpression_answers_1" type="radio" name="volumeImpression" value="1" class="required">
                                        <label for="volumeImpression_answers_1"><span><figure><img src="images/200x200.jpg" alt=""></figure></span><strong>0-500</strong>Postea democritum mnesarchum ne nam, ad vim aperiri tractatos.</label>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="item">
                                        <input data-label="Volume d'impressions" data-realname="500 à 5000" id="volumeImpression_answers_2" type="radio" name="volumeImpression" value="2" class="required">
                                        <label for="volumeImpression_answers_2"><span><figure><img src="images/200x200.jpg" alt=""></figure></span><strong>500-5000</strong>Postea democritum mnesarchum ne nam, ad vim aperiri tractatos.</label>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="item">
                                        <input data-label="Volume d'impressions" data-realname="Plus de 5000" id="volumeImpression_answers_3" type="radio" name="volumeImpression" value="3" class="required">
                                        <label for="volumeImpression_answers_3"><span><figure><img src="images/200x200.jpg" alt=""></figure></span><strong>> 5000</strong>Postea democritum mnesarchum ne nam, ad vim aperiri tractatos.</label>
                                    </div>
                                </div>
                            </div>
                            <!-- /row-->
                        </div>
                        <!-- /step -->

                        <div class="step result_wrapper">
                            <div class="question_title">
                                <h3>Voici notre proposition</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            </div>
                            <div class="row justify-content-center" id="result"></div>
                            <!-- /row-->
                        </div>
                        <!-- /step -->

                        <!-- Last step ============================== -->
                        <div class="submit step" id="end">
                            <div class="question_title">
                                <h3>Merci de renseigner vos coordonnées.</h3>
                                <p>Nous vous contacterons dans les plus brefs délais.</p>
                            </div>
                            <div class="row justify-content-center">
                                <div class="col-lg-5">
                                    <div class="box_general">
                                        <div class="form-group">
                                            <input type="text" name="nom" class="required form-control" placeholder="Nom">
                                        </div>
                                        <div class="form-group">
                                            <input type="text" name="prenom" class="required form-control" placeholder="Prénom">
                                        </div>
                                        <div class="form-group">
                                            <input type="email" name="email" class="required form-control" placeholder="Email">
                                        </div>
                                        <div class="form-group">
                                            <input type="text" name="telephone" class="form-control" placeholder="Téléphone">
                                        </div>
                                    </div>
                                    <!-- /box_general -->
                                </div>
                            </div>
                            <!-- /row -->
                        </div>
                        <!-- /Last step ============================== -->
                    </div>
                    <!-- /middle-wizard -->
                    <div id="bottom-wizard">
                        <div class="float-right clearfix">
                            <button type="button" name="backward" class="backward">Précédent</button>
                            <button type="button" name="forward" class="forward">Suivant</button>
                            <button type="submit" name="process" class="submit">Envoyer</button>
                        </div>
                    </div>
                    <!-- /bottom-wizard -->
                </form>
            </div>
            <!-- /Wizard container -->
        </div>
        <!-- /Container -->
    </main>
    <!-- /main -->

Ce que je veux

La partie dans resultHTML est ce qui est chargé dynamiquement en fonction des choix qui ont été fait.

J'aimerai récupérer les informations du choix qui a été fait afin de le PUSH dans mon tableau recap[]; mais je suis bloqué par le fait que ce ne soit pas chargé dans le DOM je présume.

Si quelqu'un a une idée ?
Merci à vous tous :)

4 Réponse

47855
,

Salut,

Il y a bien trop de code, essaye d'être plus concis stp car là c'est pas vraiment possible de comprendre rapidement ce qui se passe ^^'

61393
,

Salut,

oui je m'en suis bien rendu compte en voyant aucune réponse lol !

J'ai mis une version ONLINE http://simulateur.kthxbye.fr/

En gros là dans mon scénario quand je fais : Imprimante + A4 + Couleur + 0 à 500 et que je sélectionne la proposition puis que je fais précédent, que je sélectionne de 500 à 5000, si je hover le i à côté de "Votre sélection" j'ai bien "Choix de la machine" qui se met
Mais avant ça ça ne s'ajoute pas.

Default
,

je suis d'accord avec vous . il est possible . notre links sont ici

[URL="http://www.npco.net/"]طراحی وب سایت[/URL]
[URL="https://www.limotorsh.com/"]طراحی سایت[/URL]
[URL="http://www.idea-soft.ir/"]طراحی سایت[/URL]
[URL="http://www.kaghazbaz.com/%DA%A9%D8%A7%D8%A8%DB%8C%D9%86%D8%AA-mdf /"] MDF کابینت [/URL]
[URL=" http://www.sitecode.ir/"]طراحی سایت تهران[/URL]
[URL=" http://www.npco.net/web-design-tehran.htm"]طراحی سایت تهران[/URL]
[URL=" http://www.idea-soft.ir/"]طراحی سایت تهران[/URL]

Default
,


مقابله با لجبازی کودک و نوجوان
|

لجبازی در دوران نوجوانی
|

چگونگی رفتار با نوجوان لجباز


نوجوان لجباز
|

لجبازی در کودکان
|
علت
لجباز شدن بچه ها
|
علت
لجباز شدن کودکان

روش
هایی برای افزایش توجه


افزایش تمرکز در کودکان
|  

افزایش توجه


افزایش توجه و تمرکز در کودکان
|

افزایش توجه و تمرکز

نحوه
پاسخگویی به سوالات جنسی کودکان
|  
سوالات
جنسی کودکان
|
 آموزش
جنسی به کودکان
|
تربیت
جنسی کودک و نوجوان
|
تربیت
جنسی
|
 پرسش
های جنسی کودکان

اختلال
نافرمانی مقابله جویانه
|
علایم اختلال
بی اعتنایی

شیوع اختلال بی
اعتنایی


دروغگویی کودکان

چرا
کودکان دروغ می گویند؟
|
 دروغ
چیست؟
|
علل
دروغگویی در کودکان
|
درمان
دروغگویی
|
با دروغگویی فرزندم چگونه برخورد کنیم؟


آموزش تربیت جنسی کودکان
|
تربیت جنسی کودک
| آموزش مسائل
جنسی به کودکان و نوجوانان
|
 آموزش مسائل
جنسی به کودکان
|
تربیت جنسی کودک و نوجوان
|
پاسخ به سؤالات جنسی
کودکان

ساخت
عناوین تبلیغاتی
|
ساخت
عناوین پرفروش
|
ساخت
تبلیغات پرفروش
|

تبلیغات پرفروش
|
تکنیک
های ساخت عنوان های پرفروش برای تبلیغات
|
ساخت
انواع تبلیغات پرفروش

دلیل
میلیونر شدن
|
چطور
میلیونر شویم؟
|
تکنیک
میلیونر شدن
|
راه های
سریع میلیونر شدن
|
میلیونر
شویم
|
راه میلیونر شدن
|
میلیونر شدن
در کمتر از یک سال

میلیاردرها
چگونه فکر می کنند؟
|
ثروتمندان
چگونه فکر می کنند؟
|
طرز فکر
ثروتمندان
|
طرز فکر
میلیاردرها
|
طرز فکر
پولدارها

مهم ترین
سرمایه گذاری زندگی
|
تقویت باورهای
قدرتمند کننده

باورها و
فرکانس ها
|
سرمایه گذاری
روی کنترل ذهن
|
نتیجه باورهای
من
|
آموزش های دوره قـــدرت ذهن

باورهای
قدرتمند کننده
|
سرمایه گذاری
روی باورها

 فروشنده
حرفه‌ای
 |
تفاوت‌
بین ثروتمندان و فقرا

ذهن ثروتمند داشته
باشیم
|
ذهن ثروتمند
 |
چگونه ذهن ثروتمندی
داشته باشیم؟
|
چگونه ثروتمندی باشیم؟
|
ثروتمند

چگونه یک میلیونر شویم؟
|
چگونه میلیونر شویم؟
| چگونه پول
بیشتری جذب کنیم؟
|
چگونه می توان پول
بیشتری جذب کرد؟

اعتراضات
مشتری هنگام خرید
|
تکنیک
برخورد با اعتراضات مشتری
|
اعتراضات
مشتری
|
نحوه برخورد با اعتراضات مشتری


ویژگی های افراد موفق
|
ویژگی افراد موفق
|
افراد موفق
| افراد
موفق چه ویژگی هایی دارند؟
|
روانشناسی افراد موفق

راهکارهای ثروتمند شدن
|
چگونه ثروتمند شویم؟
| ثروتمند شویم


فروشنده حرفه ای باشید
|
تکنیک های کلامی برای
فروش
| عادت
یک فروشنده موفق
|
چگونه یک فروشنده حرفه ای شویم
|
ویژگی کلیدی یک فروشنده
 |
فروشنده حرفه ای کیست؟
| روش های نوین فروش
| تکنیک های فروش |
انواع روش های فروش
| موثرترین تکنیک‌ های
فروش


تکنیک نهایی کردن فروش
|
اهمیت نهایی کردن فروش
| افزایش قدرت
فروش
| ۷ گام
افزایش قدرت فردی‌


ترفندهای بازاریابی عصبی در قیمت‌گذاری
|

ترفندهای بازاریابی عصبی
|

بازاریابی عصبی
|

بازاریابی عصبی قیمت‌گذاری
|
آموزش
بازاریابی عصبی در قیمت‌گذاری
|
تکنیک
های بازاریابی عصبی

علم ثروتمندی
| قوانین ثروتمندی |
راز ثروت |
علم ثروتمند شدن |
قوانین ثروتمند شدن

افزایش مشتری
| روش
افزایش مشتری
|
تکنیک افزایش مشتری
|
بهترین روش افزایش مشتری
| جدیدترین روش های
افزایش مشتری

تکنیک افزایش فروش
| راهکار برای
افزایش فروش
|
راههای جذب مشتری

نکات کاربردی در
فروش
| نکات
کلیدی در فروش موفق
|
نکات کلیدی در
فروش
|
نکات کلیدی در
روانشناسی فروش
|
نکات مهم در
فروش

دلیل از دست دادن
مشتری
|
از دست دادن مشتری
|
علت از دست دادن
مشتری
| چرا
مشتری را از دست می‌دهيم؟


تکنیک های قطعی فروش موفق
|
تکنیک های فروش موفق
| روانشناسی قطعی
کردن فروش
|
روانشناسی فروش
|
قطعی کردن فروش
| تکنیک های قطعی
سازی فروش
|
موفقیت در فروش
|
فروش موفق
| روش
های خاتمه فروش
|
روش های فروش

راز
رخ دادن معجزه در زندگی اتان
|

قانون جذب کائنات
|
قانون جاذبه
 |

قدرتمندترین قانون کائنات


چگونه انسان ها را جذب کنیم
|

چگونه جذب کنیم
|

چگونه فرصت های عالی را جذب کنیم
|

چگونه ایده ها را جذب کنیم
|

چگونه انسان های عالی را جذب کنیم


قواعد مهم در فروش
|
قواعد در فروش
|
قواعد و اصول فروش
|
تکنیک های فروشندگی
| اصول فروش |
آموزش سرپرست فروش |
ویژگی های سرپرست فروش

سرپرست فروش
نقش ظاهر
در فروش
| آیا ظاهر در
فروش نقش دارد؟
|
فروشندگان موفق
|
فروشندگان سطح بال
ا | 
چگونگی فروش |
فروشنده عالی

عبارات تبلیغاتی
|
بهترین تبلیغات

ساخت عبارات برای
تبلیغاتی
|
عبارت‌های استفاده شده برای فروش
|
برترین جملات تبلیغاتی
| جملات تبلیغاتی
| جذب مشتری


فرمول های اصلی موفقیت

رسیدن به موفقیت |
فرمول جادویی موفقیت
|  ترس از شکست

| فرمول موفقیت

روش های
ترغیب مشتری به خرید
|

جدیدترین روش ترغیب مشتری
|
ترغیب مشتری به خرید
|
بهترین
روش های ترغیب مشتری به خرید
|
روش
ترغیب مشتری

تکنیک معجزه آسای
فروش
| تکنیک
معجزه فروش
|
تکنیک فروش
|
تکنیک های فروش موفق

 راه
رسیدن به موفقیت

راه رسیدن
به ثروت

تکنیک های قانون
جذب
| تکنیک
مهم قانون جذب
|
تمرین قانون جذب
| تکنیک قانون
جذب در قرآن
|
قانون جذب در
قرآن
|
تمرین برای قانون جذب
|
تمرین های عملی
برای قانون جذب

چگونه
باورهای خود را تغییر دهیم؟
|
چطور
سریع باورها را تغییر دهیم ؟
|
تغییر
سریع باورها
|
چرا
باورها را تغییر دهیم؟
|
آیا
باورها قابل تغییر هستند؟


قدرت باورها
|
قانون جذب
| قدرت
باورها در قانون جذب
|
نقش باورها در قانون
جذب
|
تغییر باورها در قانون جذب
|
تغییر باورها

| روانشناسی تغییر
باورها
| باورهای
محدودکننده
|
قدرت تجسم


روانشناسی ثروت و فراوانی
|
راز بزرگ ثروت |
راز ثروت و فراوانی
| راز بزرگ فراوانی
| راز ثروت

| راز ثروتمندان
| راز شکرگزاری |
روانشناسی سپاس‌گزاری
| روانشناسی فراوانی
قدرت
کلمات
| آیا کلمات قدرت
دارند؟
| از قدرت کلام
تان آگاه هستید؟
| قدرت
نامحدود کلمات
| آشنایی
با قدرت کلمات
| استفاده
از قدرت کلمات
| تکنیک
استفاده از قدرت کلام
|
قدرت کلام


قدرت ذهن ناخودآگاه را کنترل کنیم
|
قدرت ذهن ناخودآگاه
| کنترل ناخودآگاه

| کنترل ذهن
ناخودآگاه
|
کنترل ناخودآگاه
|
قدرت ناخودآگاه
| تکنیک های استفاده
از قدرت ناخودآگاه
|
مهار کردن قدرت ذهن
ناخودآگاه
| راز
قدرت ذهن ناخودآگاه

استفاده از قدرت
ناخودآگاه

 اصلا
تلقین چی هست؟
|
تمرین تلقین به خود
| روش های استفاده از
قدرت باورنکردنی تلقین
|
چگونه از تلقین استفاده
کنیم؟
| تکنیک های
استفاده از تلقین به خود
|
استفاده از قدرت تلقین
| قدرت تلقین

تکنیک برای ثروتمند شدن
|
 ثروتمند شدن
| راه های تکنیکی
برای ثروتمند شدن
|
تمرین برای ثروتمند
شدن

قانون
خدا برای ثروت
|
چرا
باید سپاسگزار باشیم؟

از کدام
قوانین خداوند استفاده کنیم تا ثروتمند شویم؟

آیا شما با
جذب پول مشکل دارید ؟

جذب پول
| باورهای
محدود کننده خود درباره ثروت را تغییر دهید

جذب فوری پول
در زندگی
|
باورهای
محدودکننده را تغییر دهید

جذب سریع و
آسان پول در زندگی


تکنیک خلق رویاها
|

بهترین تمرین برای رسدن به رویاها
|

تمرین برای خلق آرزوها
|
جدید
ترین تمرین برای رسیدن به آرزوها
|

تمرین برای رسیدن به آرزوها

به
هرچی فکر کنی همان میشود
|
نحوه
استفاده از آن قانون جذب در قرآن
|
آموزش قانون جذب
|

قانون جذب


دریافت از کائنات
|
قانون جذب کائنات
| راز و رمز کائنات
| قانون جذب |
کائنات چیست |
قوانين مهم کائنات
|
قانون کائنات
|
تابلو کائنات چیست ؟
|
دریافت از کائنات

تاثیر
کلمات بر کائنات
|
قدرت باور
نکردنی کلمات
|
استفاده
از نفوذ کلام
|
قدرت کلام
و کلمات
|
نیروی
کلمات در زندگی
|
قدرت کلام
|
نیروی کلمات
|
تاثیر کلمات

چگونه در
مدار ثروت قرار بگیریم؟
|
مدار ثروت
| باورهای
ثروت ساز
|
تکنیک های
تغییر باور
|
تغییر
باورها
|
فرق میان
باورها
|
سیستم
باورها
|
باور
چیست؟

قوانین
ثروت
| قانون جذب ثروت
| ثروت آفرین
تکنیک استفاده از قانون جذب
| قانون ثروتمندی
تکنیک استفاده از قانون جذب
برای ثروت
|

استفاده از قانون جذب ثروت