通过javascript为每个项目的onclick函数使用不同的参数创建列表 [英] Creating list via javascript with different arguments for each item's onclick function

问题描述

我试图通过点击一个按钮来动态地创建一个列表。该列表已正确创建。这个列表中的每个项目都有一个带有不同参数的onclick函数。因此，通过点击每个项目，屏幕上会打印另一个字（萨博或沃尔沃或宝马）。问题是，通过点击列表中的每一项，只打印最后一个字（宝马）。

这是我的html和javascript代码。 p>

function myfunction1（）{var i; var cars = [萨博，沃尔沃，宝马];对于（i = 0; i

 < button onclick =myfunction1（）> Perla< / button>< ul> < p id =allcars>< / p>< / ul> < p id =demo>< / p>  


<如果我点击萨博或沃尔沃或宝马，只有宝马将被打印在屏幕上。我想要的是：当我点击列表中的萨博项目时，打印出萨博。当我点击沃尔沃项目时，沃尔沃被打印。当我点击宝马项目时，宝马被打印出来。


解决方案

然后立即运行：



  function myfunction1（）{
 var cars = [Saab，Volvo，宝马]; （变量i = 0; i （函数（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; 
} 
  




I am trying to create a list dynamically via javascript by clicking a button. This list is created properly. Each item of this list has an onclick function with a different argument. So, by clicking on each item, an other word("Saab" or "Volvo" or "BMW") is printed on the screen. The problem is that by clicking on every item of the list, only the last word("BMW") is printed.

This is my html and javascript code.

function myfunction1() {
  var i;
  var cars = ["Saab", "Volvo", "BMW"];
  for (i = 0; i < cars.length; i = i + 1) {
    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);
  }
}

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

<button onclick="myfunction1()">Perla</button>
<ul>
 <p id="allcars"></p>
</ul>    
<p id="demo"></p>

If I click on Saab or Volvo or BMW only BMW will be printed on the screen. What I want is: when I click on Saab item of the list, "Saab" is printed. When I click on Volvo item, "Volvo" is printed. When I click on "BMW" item, "BMW" is printed.

解决方案

You can wrap the code in another closure that will then run immediately:

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

这篇关于通过javascript为每个项目的onclick函数使用不同的参数创建列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！