在 for 循環中填充動態創建的 html 個元素

Question

我在 for 循環內創建了一個包含 html 個元素的塊，其中列出了起始地址、目標地址、距離和每個地址之間的時間。 我有一個名為address的地址數組，我正試圖將其推送到 html 中的startaddress元素。在 for 循環內部， startaddress的 id 使用模板文字${[i]}動態遞增，以便創建新的基於address數組長度的元素。 在 for 循環內部，我創建了變量作為模板字符串，我認為這是正確的術語，但它們似乎沒有被控制台識別為變量。 如果我 console.log 它們，我會收到一條錯誤消息

未定義 startInput

destInput 未定義

顯然我在做什么是錯誤的，但我不確定如何動態填充startaddress 。 我最終希望在 for 循環內做的是創建 startInput1、startinput2 等，以及 destInput1、destInput2 等的相同序列。我 go 如何在 for 循環內創建這些動態變量。 在此先感謝，這是我的代碼：

                    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];
                    }

Answer 1

let startInput${[i]} = document.querySelector("#startaddress${[i]}") ; 為什么這部分使用模板文字？ 即使使用普通的 javascript 這個賦值也不起作用，（你不能動態地將數字添加到常量）但在你的情況下你也不需要這樣做，因為這樣做：

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

在 html 模板上時，也會在每個循環中為變量分配一個新值，以這種方式分配 id：

id=`startaddress${i}`

Answer 2

我能夠弄清楚為什么在 for 循環內部創建后我不能動態更新每個元素。 當然，在古斯塔沃的幫助下。 我在 for 循環中添加了 div 變量、classList.add 和 container.appendChild，這解決了問題。 我得到 null 的 startaddresses 因為試圖在它被添加到 DOM 之前分配變量及其值。 我在原始帖子中更新了我的代碼。