CODEWITHSUNDEEP
javascripthtml
DCdesign
DCdesign

Reputation: 13

How to capture and display data from a list, without having to create functions for each one?

I have the following problem: I want that every time that one of the elements of the list is clicked, the data-link value is printed, if I need to create a function for each of the elements of the list.

<ul id="programs">
    <li id="design" data-link="www.monster.inc">Diseño</li>
    <li id="fashion" data-link="www.iceage.inc">Moda</li>
    <li id="management" data-link="www.transilvania.inc">Management</li>
    <li id="arts" data-link="www.ralph.inc">Artes</li>
</ul>

<p id="demo"></p>

<script>

    var one = document.getElementById("design");

    one.onclick = function() {
        var x = one.getAttribute("data-link"); 
        document.getElementById("demo").innerHTML = x;
    }

    var two = document.getElementById("fashion");

    two.onclick = function() {
        var y = two.getAttribute("data-link"); 
        document.getElementById("demo").innerHTML = y;
    }

    var three = document.getElementById("management");

    three.onclick = function() {
        var z = three.getAttribute("data-link"); 
        document.getElementById("demo").innerHTML = z;
    }

    var four = document.getElementById("arts");

    four.onclick = function() {
        var w = four.getAttribute("data-link"); 
        document.getElementById("demo").innerHTML = w;
    }

</script>

Upvotes: 0

Views: 42

Answers (3)

Vivek
Vivek

Reputation: 2755

You can attach the onclick event to the parent ul element and use the event.target property to access the child element on which the click happened.

var programs = document.getElementById("programs");

programs.onclick = function(e) {
  var link = e.target.getAttribute("data-link");
  if (link)
    document.getElementById("demo").innerHTML = link;
};
<ul id="programs">
  <li id="design" data-link="www.monster.inc">Diseño</li>
  <li id="fashion" data-link="www.iceage.inc">Moda</li>
  <li id="management" data-link="www.transilvania.inc">Management</li>
  <li id="arts" data-link="www.ralph.inc">Artes</li>
</ul>

<p id="demo"></p>

You need not iterate through each li and attach onclick events to them individually.

Upvotes: 0

Mike Smith - MCT
Mike Smith - MCT

Reputation: 1231

There are a number of solutions for this one, with or without jQuery.

Here's a simple one that only updates your one list and not other broadly selected elements on the page.

var list = document.getElementById("programs").getElementsByTagName("li")
for (var i=0;i<list.length;i++)
{

  list[i].onclick = function() {
        var x = this.getAttribute("data-link"); 
        document.getElementById("demo").innerHTML = x;
    }
}

Upvotes: 0

Adam Azad
Adam Azad

Reputation: 11297

I can think of two selectors for the above structure. 

var links = document.querySelectorAll('[data-link]');

and 

var links = document.querySelectorAll('#programs > li');

And then loop over the NodeList and attach the function to onclick prop. I recommend addEventListener, however.

var links = document.querySelectorAll('[data-link]'),
    demo  = document.getElementById("demo");

links.forEach(function(link){

    link.onclick = function() {
        var x = this.getAttribute("data-link"); 
        demo.innerHTML = x;
    }

});
<ul id="programs">
    <li id="design" data-link="www.monster.inc">Diseño</li>
    <li id="fashion" data-link="www.iceage.inc">Moda</li>
    <li id="management" data-link="www.transilvania.inc">Management</li>
    <li id="arts" data-link="www.ralph.inc">Artes</li>
</ul>

<p id="demo"></p>

Upvotes: 1

Related Questions