在 for 循环中填充动态创建的 html 元素

Question

我在 for 循环中创建了一个包含 html 个元素的块，其中列出了起始地址、目标地址、每个地址之间的距离和时间。我有一个名为 address 的地址数组，我正试图将其推送到 html 中的 startaddress 元素。在 for 循环内部，startaddress 的 id 使用模板文字 ${[i]} 动态递增，以便根据 address 数组的长度创建新元素。在 for 循环内，我创建了变量作为模板字符串，我认为这是正确的术语，但它们似乎没有被控制台识别为变量。如果我 console.log 他们，我会收到一条错误消息

startInput is not defined

destInput is not defined

显然我的做法是错误的，但我不确定如何动态填充 startaddress。我最终希望在 for 循环内做的是创建 startInput1、startinput2 等，以及为 destInput1、destInput2 等创建相同的序列。我如何在 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 并解决了问题。由于在将变量添加到 DOM 之前尝试分配变量及其值，所以我的 startaddresses 为空。我在原来的 post.

中更新了我的代码

在 for 循环中填充动态创建的 html 元素

Populate dynamically created html elements inside of a for loop

javascript

variables

for-loop

template-literals