Добавить текст в textarea с помощью javascript

Как добавить текст в текстовое поле?

<textarea id="alltext"></textarea>

<ol>
    <li onclick="addText(Hello')">Hello</li>
    <li onclick="addText(World')">World</li>
    <li onclick="addText(Earthlings')">Earthlings</li>
</ol>

<script>
    var Alltext = "";
    function addText(text) {
        Alltext += text
    }
document.getElementById("alltext").value = Alltext;
</script>

Это довольно неэффективно, так как список на самом деле очень длинный. Добавленный текст - это именно то значение, которое я вижу в HTML, поэтому нет необходимости вводить его дважды вправо?

Есть ли лучшие методы?

Ответ 1

Используйте делегирование событий, назначив onclick <ol>. Затем передайте объект event в качестве аргумента и, используя его, извлеките текст из элемента, по которому щелкнули.

function addText(event) {
    var targ = event.target || event.srcElement;
    document.getElementById("alltext").value += targ.textContent || targ.innerText;
}

<textarea id="alltext"></textarea>

<ol onclick="addText(event)">
  <li>Hello</li>
  <li>World</li>
  <li>Earthlings</li>
</ol>

Ответ 2

Попробуйте:

<!DOCTYPE html>
<html>
<head>
    <title>List Test</title>
    <style>
        li:hover {
            cursor: hand; cursor: pointer;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("li").click(function(){
                $('#alltext').append($(this).text());
            });
        });
    </script>
</head>
<body>

    <h2>List items</h2>
    <ol>
        <li>Hello</li>
        <li>World</li>
        <li>Earthlings</li>
    </ol>
    <form>
        <textarea id="alltext"></textarea>
    </form>

</body>
</html>