通过不同的参数为每个项目的onclick函数创建列表

问题描述：

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

这是我的HTML和JavaScript代码。

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>

如果我点击萨博或沃尔沃，宝马BMW仅将在屏幕上进行打印。我想要的是：当我点击列表中的萨博项目时，打印出“萨博”。当我点击沃尔沃项目时，“沃尔沃”被打印。当我点击“宝马”项目时，“宝马”被打印。

答

你可以用代码在另一封则是会立即运行：

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

这不会工作。检查 – Durga

@Durga它将工作.. –

它只是缺乏与功能显示车.. –

答

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(this); 
 
    } 
 
    li.appendChild(a); 
 
    document.getElementById("allcars").appendChild(li); 
 
    } 
 
} 
 

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

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

其打印，仅仅是因为在每一次迭代是价值的mycar变量宝马。您只需发送该单击的对象并打印该innerHTML值。

答

我做了一些改动，以您的解决方案：

我必将单个事件监听器ul元素click事件。这样您就不必在每个li上添加一个点击事件。
想要导航时，请使用a，在几乎所有其他需要交互式元素的情况下，请使用button。

const 
 
    carList = document.getElementById('car-list'), 
 
    createTrigger = document.getElementById('create-car-list'), 
 
    demoElement = document.getElementById('demo'); 
 
    
 
function onCarListClicked(event) { 
 
    const 
 
    carMake = event.target.getAttribute('data-car-make'); 
 
    
 
    demoElement.textContent = carMake; 
 
} 
 
    
 
function onCreateCarList(){ 
 
    const 
 
    cars = ["Saab", "Volvo", "BMW"]; 
 
    
 
    cars.forEach(car => { 
 
     const 
 
     li = document.createElement('li'), 
 
     button = document.createElement('button'); 
 
     button.setAttribute('type', 'button'); 
 
     button.setAttribute('data-car-make', car); 
 
     button.textContent = car; 
 
     
 
     li.appendChild(button); 
 
     carList.appendChild(li); 
 
    }); 
 
} 
 

 
carList.addEventListener('click', onCarListClicked); 
 
createTrigger.addEventListener('click', onCreateCarList);

<button id="create-car-list">Perla</button> 
 
<ul id="car-list"> 
 
    <p id="allcars"></p> 
 
</ul>  
 
<p id="demo"></p>

答

问题提出了在每个迭代元素的onclick功能，因为mycar变量的变化使用最后一个。

您可以使用此功能，例如：

a.onclick = function() { 
    showcar(this.innerHTML); 
}

this关键字指其被点击的元素。所以它按预期工作。

通过不同的参数为每个项目的onclick函数创建列表

相关推荐