點擊列表HTML5的JavaScript

Question

我試圖單擊列表中的一個元素，我創建這樣的一個元素：

function addlist2(nombre,fecha){ 

var node = document.createElement("LI");     
var textnode = document.createTextNode(nombre+" ");   
var textnode2 = document.createTextNode(fecha); 
node.appendChild(textnode);        
node.appendChild(textnode2); 
document.getElementById("lista").appendChild(node);  
alert(document.getElementById(nombre).value); 

} 

但我不知道每個元素的ID，我創建。 我想做不同的事情時，我在列表就像打開不同的窗口不同元素點擊或做不同的functios： 例如：

MYLIST：

DOG

CAT

BIRD我調用addlist2（「dog」，「」）時創建了這個元素。現在我想顯示「你已經點擊DOG」。

Answer 1

更新這個答案的底部，以適應評論

你並不真的需要爲每個列表項的id。

此外，根據您的li的內容，您可能需要使用textContent而不是innerHTML來檢查內容。有關該主題的更多信息，請參閱innerText vs innerHtml vs label vs text vs textContent vs outerText。

小提琴（含評論）：http://jsfiddle.net/c19u7074/3/

HTML

<ul id="lista"> 
</ul> 

的JavaScript

function addlist2(nombre, fecha) { 
    var node = document.createElement("li"); 
    var textnode = document.createTextNode(nombre + " "); 
    var textnode2 = document.createTextNode(fecha); 
    node.appendChild(textnode); 
    node.appendChild(textnode2); 
    document.getElementById("lista").appendChild(node); 
    // Add a listener to the node 
    node.addEventListener("click", clickHandler); 
} 

function clickHandler(e) { 
    // Get node content as a string 
    var nodeText = e.target.textContent; 
    // Trim whitespaces from the string and check if they match any criteria you like 
    switch (nodeText.trim()) { 
    case "dog": 
     // It's a dog! So do dog stuff here 
     alert("woof woof"); 
     break; 
    case "bird": 
     // It's a bird! So do bird stuff here 
     alert("tweet tweet"); 
     break; 
    default: 
     // Else, do stuff below 
    } 
} 

addlist2("dog", ""); 
addlist2("bird", ""); 

更新

正如您對此答案的評論中所述：根據li的內容打開一個固定URL和可變部分的窗口是可能的。

更新小提琴：http://jsfiddle.net/c19u7074/4/

更新的Javascript（只有clickHandler功能得到了更新）

function clickHandler(e) { 
    // Get node content as a string 
    var nodeText = e.target.textContent; 
    // Open a window pointing to a fixed URL with a variable part containing the clicked item's contents 
    // Trim whitespaces from the string and check if they match any criteria you like 
    window.open('https://www.google.be/?q=' + nodeText.trim()) 
} 

Answer 2

您需要使用innerHTML：

function addlist2(nombre, fecha) { 
    var node = document.createElement("LI"); 
    node.setAttribute("id", nombre); 
    var textnode = document.createTextNode(nombre+" "); 
    var textnode2 = document.createTextNode(fecha); 
    node.appendChild(textnode); 
    node.appendChild(textnode2); 
    document.getElementById("lista").appendChild(node); 
    alert(document.getElementById(nombre).innerHTML); 
} 

你也忘了補充一點：

node.setAttribute("id", nombre); 

片段

function addlist2(nombre, fecha) { 
 
    var node = document.createElement("LI"); 
 
    node.setAttribute("id", nombre); 
 
    var textnode = document.createTextNode(nombre+" "); 
 
    var textnode2 = document.createTextNode(fecha); 
 
    node.appendChild(textnode); 
 
    node.appendChild(textnode2); 
 
    document.getElementById("lista").appendChild(node); 
 
    alert(document.getElementById(nombre).innerHTML); 
 
}

<ul id="lista"></ul> 
 
<button onclick="addlist2(1, 'hi')">Click?</button>

小提琴：http://output.jsbin.com/yitemuqebi