Pass this value from a list with javascript

Question

I have the following list:

<ul>
    <li onclick="populateComment(..this.)">very good </li>
    <li onclick="populateComment(..this.)">not so good</li>
    <li onclick="populateComment(..this.)">no t.....</li>
</ul>

and javascript:

function populateComment() {

    document.getElementById("COMMENT").value = document.getElementById("COMMENT").value + 'THE_STRING_VALUE_FROM_THE_LIST';

}

So the idea is that I have a textarea, which I fill by clicking on the list.

So if I click on the first list, the text "very good" should be appended to the textarea. But I dont want to retype the text "very good" in my function, can I take it directly with something as an argument like this.value.. so it automatically takes the string between the <li> ...</li>

Thank you for your time.

Rob W · Accepted Answer · 2011-12-26 15:31:30Z

3

You're looking for:

this.textContent || this.innerText

this.textContent is supported in all decent browsers, this.innerText is needed for older versions of IE.

Instead of duplicating the onclick handler multiple times, you can also bind a listener to the <ul> element:

// Replace <ul> with <ul id="populatefrom">
document.getElementById("populatefrom").onclick = function(ev) {
    ev = ev || window.event; //Backwards compatible with IE
    var target = ev.target;
    if (target.nodeName.toLowerCase() == "li") {
        document.getElementById("COMMENT").value += target.textContent || target.innerText;
    }
};

edited Dec 26, 2011 at 15:31

answered Dec 26, 2011 at 15:25

Rob W

350k87 gold badges811 silver badges683 bronze badges

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

1 Comment

Rob W Over a year ago

@Adnan Updated answer for an easier implementation. I have used the simple .onclick = .. form to prevent having to define conditions for addEventListener (decent browsers) or attachEvent (IE).

Niet the Dark Absol · Accepted Answer · 2011-12-26 15:28:04Z

1

If you don't have anything other than a simple bit of text, you could also use:

this.firstChild.nodeValue;

However if there are any nodes at all (bold, span, or anything else other than text... even an HTML comment) then this won't work and you need the textContent/innerText combo Rob W gave.

answered Dec 26, 2011 at 15:28

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Comments

Jakub · Accepted Answer · 2011-12-26 15:28:25Z

-1

Sure you could do this with jQuery like so (didn't test this yet):

<ul>
    <li class="populateComment">very good </li>
    <li class="populateComment">not so good</li>
    <li class="populateComment">no t.....</li>
</ul>

and your jQuery:

$('.populateComment').click(function(){
  $('#textboxID').val($(this).html());
});

Working jsfiddle: http://jsfiddle.net/zEaam/

answered Dec 26, 2011 at 15:28

Jakub

20.5k8 gold badges67 silver badges93 bronze badges

2 Comments

Niet the Dark Absol Over a year ago

-1 for bringing in jQuery just for something so incredibly basic.

Rob W Over a year ago

Also, if you're using jQuery, you'd better make full use of it: $("li").click(function(){$("#textboxId").val($(this).html());});

Collectives™ on Stack Overflow

Pass this value from a list with javascript

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related