通過不同的參數爲每個項目的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僅將在屏幕上進行打印。我想要的是：當我點擊列表中的薩博項目時，打印出「薩博」。當我點擊沃爾沃項目時，「沃爾沃」被打印。當我點擊「寶馬」項目時，「寶馬」被打印。

來源

2017-09-13 nesi

你可以用代碼在另一封則是會立即運行：

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

來源

2017-09-13 07:17:10 PredatorIWD

這不會工作。檢查 – 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值。

來源

2017-09-13 07:23:47 Durga

我做了一些改動，以您的解決方案：

我必將單個事件監聽器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>

來源

2017-09-13 07:24:27 Thijs

問題提出了在每個迭代元素的onclick功能，因爲mycar變量的變化使用最後一個。

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

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

this關鍵字指其被點擊的元素。所以它按預期工作。

來源

2017-09-13 07:25:48 Emre

通過不同的參數爲每個項目的onclick函數創建列表

回答

相關問題