通过javascript为每个项目创建具有不同参数的列表'；s onclick函数

我试图通过点击一个按钮，通过javascript动态创建一个列表。此列表已正确创建。此列表的每一项都有一个带有不同参数的onclick函数。因此，点击每一项，屏幕上就会显示另一个单词（“萨博”或“沃尔沃”或“宝马”）。问题是，通过点击列表中的每一项，只会打印最后一个单词（“BMW”）

这是我的html和javascript代码

函数myfunction1（）{
var i；
var汽车=[“萨博”、“沃尔沃”、“宝马”]；
对于（i=0；i

佩拉

---

您可以将代码包装到另一个闭包中，然后立即运行：

function myfunction1(){
    var cars = ["Saab", "Volvo", "BMW"];
    for (var i = 0; i < cars.length; i=i+1) {
        (function (i) {
            var cars = ["Saab", "Volvo", "BMW"];
            var y = cars[i];
            var mycar = cars[i];
            var li = document.createElement('li');
            var a = document.createElement('a');
            a.innerHTML = y;
            a.onclick = function(){
                showcar(mycar);
            };
            li.appendChild(a);
            document.getElementById("allcars").appendChild(li);
        }).call(this, i);
    }
} 

function showcar(car){
    document.getElementById("demo").innerHTML = car;
}

函数myfunction1（）{
var汽车=[“萨博”、“沃尔沃”、“宝马”]；
对于（变量i=0；i

您可以将代码包装到另一个闭包中，然后立即运行：

function myfunction1(){
    var cars = ["Saab", "Volvo", "BMW"];
    for (var i = 0; i < cars.length; i=i+1) {
        (function (i) {
            var cars = ["Saab", "Volvo", "BMW"];
            var y = cars[i];
            var mycar = cars[i];
            var li = document.createElement('li');
            var a = document.createElement('a');
            a.innerHTML = y;
            a.onclick = function(){
                showcar(mycar);
            };
            li.appendChild(a);
            document.getElementById("allcars").appendChild(li);
        }).call(this, i);
    }
} 

function showcar(car){
    document.getElementById("demo").innerHTML = car;
}

函数myfunction1（）{
var汽车=[“萨博”、“沃尔沃”、“宝马”]；
对于（变量i=0；i

函数myfunction1（）{
var i；
var汽车=[“萨博”、“沃尔沃”、“宝马”]；
对于（i=0；i

佩拉

函数myfunction1（）{
var i；
var汽车=[“萨博”、“沃尔沃”、“宝马”]；
对于（i=0；i

佩拉

---

我对您的解决方案做了一些更改：

• 我已将单个事件侦听器绑定到单击事件的

  ul

  元素。这样，您就不必在每个

  li

  上添加单击事件
• 当您想要导航时，请使用

  a

  ，在几乎所有其他需要交互式元素的情况下，请使用

  按钮

const
carList=document.getElementById（'car-list'），
createTrigger=document.getElementById（'create-car-list'），
demoElement=document.getElementById（'demo'）；
单击CarlistClicked后的函数（事件）{
常数
carMake=event.target.getAttribute（'data-car-make'）；
demoElement.textContent=carMake；
}
函数onCreateCarList（）{
常数
汽车=[“萨博”、“沃尔沃”、“宝马”]；
cars.forEach（car=>{
常数
li=document.createElement（'li'），
button=document.createElement（'button'）；
setAttribute（'type'，'button'）；
按钮.setAttribute（'data-car-make'，car）；
button.textContent=car；
li.appendChild（按钮）；
卡利斯特·查德（李）；
});
}
carList.addEventListener（'click'，onCarListClicked）；
createTrigger.addEventListener（'click'，onCreateCarList）
佩拉

我对您的解决方案做了一些更改：

• 我已将单个事件侦听器绑定到单击事件的

  ul

  元素。这样，您就不必在每个

  li

  上添加单击事件
• 当您想要导航时，请使用

  a

  ，在几乎所有其他需要交互式元素的情况下，请使用

  按钮

const
carList=document.getElementById（'car-list'），
createTrigger=document.getElementById（'create-car-list'），
demoElement=document.getElementById（'demo'）；
单击CarlistClicked后的函数（事件）{
常数
carMake=event.target.getAttribute（'data-car-make'）；
demoElement.textContent=carMake；
}
函数onCreateCarList（）{
常数
汽车=[“萨博”、“沃尔沃”、“宝马”]；
cars.forEach（car=>{
常数
li=document.createElement（'li'），
按钮=文件