Передайте это значение из списка с JavaScript

Question

У меня есть следующий список:

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

и JavaScript:

function populateComment() { 

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

} 

Так что идея состоит в том, что у меня есть текстовое поле, которое я заполнить, нажав на список.

Так что, если я нажму на первый список, текст «очень хороший» должен быть добавлен в текстовое поле. Но я не хочу, чтобы перепечатывать текст «очень хорошо» в моей функции, я могу взять его непосредственно с чем-то в качестве аргумента, как this.value.., поэтому он автоматически берет строку между <li> ...</li>

Спасибо за ваше время.

Answer 1

Вы ищете:

this.textContent || this.innerText 

this.textContent поддерживается во всех приличных браузерах, this.innerText необходим для более старых версий IE.

Вместо того, чтобы дублировать обработчик OnClick несколько раз, вы можете также связать слушатель с <ul> элемента:

// 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; 
    } 
}; 

Answer 2

Если у вас нет ничего, кроме простого фрагмента текста, вы можете также использовать :

this.firstChild.nodeValue; 

Однако, если есть какие-либо узлы на всех (полужирный, пядь, или что-нибудь еще, кроме текста ... даже HTML комментарий), то это не будет работать, и вам потребуется textContent/innerText комбо Rob W дал ,

Answer 3

Конечно, вы могли бы сделать это с помощью JQuery, как так (не проверял это еще):

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

и ваш Jquery:

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

Работа jsfiddle: http://jsfiddle.net/zEaam/