click on a element of a list html5 javascript

Question

I'm trying to click on a element of a list that I create like this:

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

}

But I don't know the id of each element that I create. I want to do different things when I click in different element of the list like open different windows or do different functios: For example:

Mylist:

DOG

CAT

BIRD

I created this elements when I called addlist2("dog",""); And now I want to show "You have clicked on DOG".

score 2 · Accepted Answer · edited May 23 '17 at 12:30

Update at the bottom of this answer to adapt to the comments

You don't really need an id for each list item.

Also, depending on your li's content, you might want to use textContent in stead of innerHTML to check the content. See innerText vs innerHtml vs label vs text vs textContent vs outerText for more information on that topic.

Fiddle (with comments): 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", "");

Update

As you asked in the comments on this answer: opening a window with a fixed URL and variable part depending on the lis contents is possible.

Updated Fiddle: http://jsfiddle.net/c19u7074/4/

Updated Javascript (only the clickHandler function got updated)

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())
}

It works, sorry if my question was no good but I try to click in different li if I add dog cat bird house purple laptot or another thing. The problem is that I don't know what I will add on the list. For example if I add hello I want to open a new window http:.........?hello and If I put asd I want to open http:......?asd — Manumarigle, Dec 02 '15 at 12:50
Yes, hence the `switch` statement, allowing you to change the result of clicking a `li` depending on it's contents. — Gerrit Bertier, Dec 02 '15 at 12:51
But with case before I need to know the words I will put on the list, and I don't know what I will add on the list — Manumarigle, Dec 02 '15 at 12:53
How are you going to decide what happens when clicking a list item then? — Gerrit Bertier, Dec 02 '15 at 12:56
I don't know, I always want to open a new window deppending the word I click. If I click on hello I open http:..........?hello. If i click on dog I open http:............?dog. the problem is that I can add different words and I don't want to have all the words loaded on my code. — Manumarigle, Dec 02 '15 at 13:00

score 1 · Answer 2 · answered Dec 02 '15 at 12:30

You need to use 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);
}

Also you forgot to add this:

node.setAttribute("id", nombre);

Snippet

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>

Fiddle: http://output.jsbin.com/yitemuqebi

And If I want to do a onclick() for dog, a different for cat and a different for bird? — Manumarigle, Dec 02 '15 at 12:39
@Manumarigle You can use `if` condition this way: `if (document.getElementById(nombre).innerHTML == "cat")`. — Praveen Kumar Purushothaman, Dec 02 '15 at 12:42

click on a element of a list html5 javascript

2 Answers2

Update