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

Question

我一直在研究所有相關的問題，但沒有一個解決方案對我有用。 我對 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>

Answer 1

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

您需要做的是為 onclick 分配一個函數。 然后在執行 onclick 時執行此函數。 如下：

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

現在每個列表項的 onclick 事件都有一個分配給它的函數，每次單擊列表項時都會將hello world輸出到控制台。

Answer 2

您需要為 onclick 事件分配一個函數：

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

Answer 3

這是我的解決方案：

function toggleDone(event) {
  var ev = event.target;
  ev.classList.toggle("done");
}

ul.addEventListener("click", toggleDone);

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

問題描述

3 個解決方案

解決方案1
2 2017-08-14 14:32:51

解決方案2
1 已采納 2017-08-14 14:29:43

解決方案3
0 2020-05-15 12:26:28

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

問題描述

3 個解決方案

解決方案1 2 2017-08-14 14:32:51

解決方案2 1 已采納 2017-08-14 14:29:43

解決方案3 0 2020-05-15 12:26:28

解決方案1
2 2017-08-14 14:32:51

解決方案2
1 已采納 2017-08-14 14:29:43

解決方案3
0 2020-05-15 12:26:28