मैंने लूप के अंदर एचटीएमएल तत्वों का एक ब्लॉक बनाया है जो प्रत्येक पते के बीच एक प्रारंभिक पता, गंतव्य पता, दूरी और समय सूचीबद्ध करता है। मेरे पास addressनाम के पतों की एक सरणी है जिसे मैं html में अपने startaddress तत्व पर धकेलने का प्रयास कर रहा हूं। लूप के अंदर, startaddress के लिए आईडी को एक टेम्पलेट शाब्दिक ${[i]} के साथ गतिशील रूप से बढ़ाया जाता है ताकि address सरणी की लंबाई के आधार पर नए तत्व बनाए जा सकें। लूप के अंदर, मैंने वैरिएबल को टेम्प्लेट स्ट्रिंग्स के रूप में बनाया, मुझे लगता है कि यह सही शब्दावली है, लेकिन वे कंसोल में वेरिएबल के रूप में पहचाने नहीं जाते हैं। अगर मैं उन्हें कंसोल.लॉग करता हूं, तो मुझे एक त्रुटि संदेश मिलता है

startInput परिभाषित नहीं है

destInput परिभाषित नहीं है

जाहिर है कि मैं जो कर रहा हूं वह गलत है, लेकिन मुझे यकीन नहीं है कि startaddress को गतिशील रूप से कैसे पॉप्युलेट किया जाए। मैं अंततः लूप के अंदर क्या करने की उम्मीद कर रहा हूं वह है startInput1, startinput2, आदि बनाना, साथ ही destInput1, destInput2, आदि के लिए उसी अनुक्रम के साथ। मैं लूप के अंदर इन गतिशील चर बनाने के लिए कैसे जा सकता हूं। अग्रिम धन्यवाद और यहाँ मेरा कोड है:

                    let container = document.querySelector(".container-lg")

                    for (let i = 0; i <= addresses.length; i++) {
                        let div = document.createElement("div");
                        div.classList.add("card", "card-body", "mb-3");
                        console.log(addresses[i]);
                        div.innerHTML = `<div class="mx-auto" style="width: 500px; margin-top:50px;">

                            <div class="input-group">
                                <div class="input-group-prepend">
                                <span class="input-group-text">Starting Address</span>
                                </div>
                                <input class="form-control" type="text" placeholder="Start Address" id="startaddress${i}">
                            </div>
                            <br />
                            <div class="input-group">
                                <div class="input-group-prepend">
                                <span class="input-group-text">Destination Address</span>
                                </div>
                                <input class="form-control" type="text" placeholder="Destination Address" id="destAddress${i}">
                            </div>
                            <hr />
                            <div class="card" style="width: 18rem;">
                                <div class="card-body">
                                <h5 class="card-title">Distance <span id="distance"></span></h5>
                                </div>
                            </div>
                            <br />
                            <div class="card" style="width: 18rem;">
                                <div class="card-body">
                                <h5 class="card-title">Trip Time <span id="time1"></span></h5>
                                </div>
                            </div>`;
                        container.appendChild(div);
                        let startInput = document.querySelector(`#startaddress${[i]}`);
                        startInput.value = addresses[i];
                    }
0
JackJack 29 जुलाई 2020, 15:01

2 जवाब

सबसे बढ़िया उत्तर

मैं यह पता लगाने में सक्षम था कि लूप के अंदर बनाने के बाद मैं प्रत्येक तत्व को गतिशील रूप से अपडेट क्यों नहीं कर सका। बेशक, गुस्तावो की मदद से। मैंने लूप के अंदर div वैरिएबल, classList.add और कंटेनर.appendChild जोड़ा और इससे समस्या हल हो गई। डीओएम में जोड़े जाने से पहले वैरिएबल और उसके मूल्य को असाइन करने का प्रयास करने के कारण मैं स्टार्टड्रेस के लिए शून्य हो रहा था। मैंने मूल पोस्ट में अपना कोड अपडेट किया।

0
Ang 29 जुलाई 2020, 21:56

let startInput${[i]} = document.querySelector("#startaddress${[i]}"); यह हिस्सा टेम्पलेट अक्षर का उपयोग क्यों कर रहा है? यहां तक ​​​​कि सादे जावास्क्रिप्ट का उपयोग करने से भी यह असाइनमेंट काम नहीं करेगा, (आप गतिशील रूप से संख्याओं को स्थिरांक में नहीं जोड़ सकते हैं) लेकिन आपके मामले में भी आपको ऐसा करने की आवश्यकता नहीं होगी:

let startInput = document.querySelector(`#startaddress${i}`)

एचटीएमएल टेम्पलेट पर भी प्रत्येक लूप पर चर के लिए एक नया मान असाइन करेगा, आईडी को इस तरह असाइन करें:

id=`startaddress${i}`
1
Gustavo Freire 4 अगस्त 2020, 20:04