如何讓JavaScript創建的列表項可點擊？

我一直在經歷所有相關的問題，但沒有任何解決方案爲我工作。我對JavaScript非常陌生，對於如何使用JavaScript創建的列表有可點擊的項目感到困惑。最近的嘗試包括嘗試在點擊時彈出警報，但相反，它彈出第二個頁面加載。請幫忙！這裏是我當前的代碼：如何讓JavaScript創建的列表項可點擊？

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="css/m-buttons.css"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style> 
div.links{ 
margin: auto; 
border: 3px solid #003366; 
text-align: left; 
max-width: 700px; 
} 
p{ 
font-size: 40px; 
text-align: center; 
} 
li{ 
font-size: 1w; 
} 
body{ 
font-family: verdana; 
} 
</style> 
</head> 
<body> 
<div class = "links"> 
<ul id="blah"></ul> 
<script> 
var testArray = ["One","Two","Three","Four","Five","Six","Seven"]; 
function makeLongArray(array){ 
for(var i = 0; i < 1000; i++){ 
array.push(i); 
} 
} 
makeLongArray(testArray); 
function makeUL(array) { 
    // Create the list element: 
    var list = document.createElement("UL"); 
    list.setAttribute("id", "blah"); 

    for(var i = 0; i < array.length; i++) { 
     // Create the list item: 
     var item = document.createElement("LI"); 

     // Set its contents: 
     item.appendChild(document.createTextNode(array[i])); 

     // Add it to the list: 
     list.appendChild(item); 
     list.onclick = alert("Help."); //this is the code causing the issue. 
    } 

    // Finally, return the constructed list: 
    return list; 
} 

// Add the contents of options[0] to #foo: 
document.getElementById("blah").appendChild(makeUL(testArray)); 
</script> 
</div> 
</body> 
</html>

來源

2017-08-14 CSRenA

我不太清楚你在這裏要求什麼，你是否會考慮再詳細一點？ –

對不起。基本上，我用JavaScript來創建一個數組，並將數組的元素變成ul。我想讓每個列表項都可點擊。 – CSRenA

'onclick'需要一個函數分配給它，你將它賦值爲alert（「Help。」）的返回值，我相信這個值是未定義的。 'alert'立即執行。用匿名函數包裝它 –

你需要一個函數分配給onclick事件：

list.onclick = function(){ alert("Help."); }

來源

2017-08-14 14:29:43 kinggs

謝謝。這工作！我會在5分鐘內接受你的回答。 – CSRenA

現有的代碼將執行alert('Help.')每次你執行這行代碼list.onclick = alert("Help.");

你需要做的是給onclick分配一個函數。這個函數然後在執行onclick時被執行。具體如下：

item.onclick = function() {console.log('hello world');};

現在每個列表項的onclick事件都分配了一個函數，的hello world輸出到控制檯每次列表項被點擊。

來源

2017-08-14 14:32:51 Phil

如何讓JavaScript創建的列表項可點擊？

回答

相關問題