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".

Community · Accepted Answer · 2017-05-23 12:30:16Z

2

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

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Dec 2, 2015 at 12:44

Gerrit Bertier

4,2412 gold badges23 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Manumarigle Over a year ago

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

Gerrit Bertier Over a year ago

Yes, hence the switch statement, allowing you to change the result of clicking a li depending on it's contents.

Manumarigle Over a year ago

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

Gerrit Bertier Over a year ago

How are you going to decide what happens when clicking a list item then?

Manumarigle Over a year ago

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.

Praveen Kumar Purushothaman · Accepted Answer · 2015-12-02 12:30:16Z

1

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

answered Dec 2, 2015 at 12:30

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

3 Comments

Manumarigle Over a year ago

Thank's you so much :)

Manumarigle Over a year ago

And If I want to do a onclick() for dog, a different for cat and a different for bird?

Praveen Kumar Purushothaman Over a year ago

@Manumarigle You can use if condition this way: if (document.getElementById(nombre).innerHTML == "cat").

Collectives™ on Stack Overflow

click on a element of a list html5 javascript

2 Answers 2

Update

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related