get selected value in label using JavaScript dynamically

Question

I have to print 10 values dynamically in javascript using for loop. Here I take label for printing.

Now when I click on particular text on label I can show one alert with that text name,

Any One help me How to do this.

<html>
<head>
<script type = "text/javascript">


var x = "";
function checkCookie(){

var arr = new Array("One","Two","Three");
for(var i=0; i<arr.length; i++) {
    x =  x + arr[i] + "<br>" + "<br>";
    document.getElementById("idval").innerHTML = x;
}

}

function getItem(){
// here i want to display the selected label item
}


</script>
</head>
<body onload = "checkCookie()">
<label id = "idval" onclick = "getItem()"> </label>
</body>
</html>

It's dangerous to go alone, take this [Fiddle](http://jsfiddle.net/WLKm8/) with you ;) — Moritz Roessler, Feb 12 '13 at 09:04

score 3 · Accepted Answer · edited May 23 '17 at 11:48

3

Not at all clear from your question description what it is you need. If what you're wanting is to dynamically create labels, and have access to their onclick events; have a look at the Javascript functions appendChild and setAttribute. I've created a JSfiddle which demonstrates what you might need:

function createLabels() {    
    for(var i=0; i<10; i++) {
        var label = document.createElement('label');        
        label.innerHTML = "item " + i;       
        label.onclick = onClick;
        document.body.appendChild(label);    
    }
}

function onClick(e){
    alert(e.srcElement.innerHTML)
}

http://jsfiddle.net/R4abH/2/

Edit 1 : Adding onclick attributes is considered bad practise. Reworked answer using event listeners instead.

Edit 2 : As per Benjamin Gruenbaum's comment below, AddEventListener does not seem to be supported by IE (please see MSIE and addEventListener Problem in Javascript?). Reworked jsfiddle to use onclick instead, as per dystroy's suggestion.

edited May 23 '17 at 11:48

Community

1
1

answered Feb 12 '13 at 08:55

thesheps

635
4
11

Bad answer, setting attribute to onclick is a form of _eval_ and should be avoided – Benjamin Gruenbaum Feb 12 '13 at 10:02
DOn't use strings with "onclick". Assign a function – John Dvorak Feb 12 '13 at 10:02
Seriously, using setAttribute and a function defined as a string in order to define an event handler is very bad practice. – Denys Séguret Feb 12 '13 at 10:02
Fair enough comments - Should I delete this answer to prevent confusion? – thesheps Feb 12 '13 at 10:04
Hint : to avoid i having the value of end of loop, you could protect the content of the loop with a closure. See [this answer](http://stackoverflow.com/questions/13731759/jquery-using-integer-in-text-function-in-for-loop/13731789#comment18866164_13731789) if my comment isn't clear. – Denys Séguret Feb 12 '13 at 10:07
1

Definitely fix it. You can't delete an accepted answer anyways. – John Dvorak Feb 12 '13 at 10:07
6

Thanks for all the input on the answer, guys - I'm fairly new to the community, so it's really great to see constructive feedback as opposed to flaming! – thesheps Feb 12 '13 at 10:11
1

@ChrisShepherd thank you for fixing your answer, it is much better now, however I'm not sure addEventListener works in IE7 so you might want to suggest something that does, classic IE handles event with attachEvent. – Benjamin Gruenbaum Feb 12 '13 at 10:16
In this case, using `label.onclick=onClick` would be fine. – Denys Séguret Feb 12 '13 at 10:21

get selected value in label using JavaScript dynamically

1 Answers1