onclick append <a> item</a> text to textarea

Question

今の1時間を探していて、これでも簡単な解決策が見つからない場合は、 のように、jqueryと長いスクリプトを使って実際には意味をなさないと思われるようです。

申し訳ありませんが、私はこれについて無知ですか？

私がやろうとしていることは、かなり簡単なものでなければならず、何かがステップアップしてJavaScriptの部分を完成することができれば誠に感謝しています。私はこれを行うための技術や知識が不足していることを認めなければなりません。私が行った研究は、私がしようとしていることと結合できない答えに私を導きました。簡単な言葉で

<textarea id="cartlist">items will be copied here when you click on them</textarea> 
<a href="#" onclick="trigger the add to list function">item name 1</a> 
<a href="#" onclick="trigger the add to list function">item name 2</a> 
<a href="#" onclick="trigger the add to list function">item name 3</a> 
<a href="#" onclick="trigger the add to list function">item name 4</a> 

： onclickを追加し、あなたが特定の要素をクリックするとonclickの自動的にリストに追加されます食料品のリストに似たテキストエリア にテキストを追加します。事前に

（牛乳、砂糖、ベーコン、など。）

感謝！

Answer 1

シンプルな純粋なJSあなたはOPのコメントまでこの

function CopyToTextarea(el){ 
 
    var text = el.textContent; 
 
    var textarea = document.getElementById('cartlist'); 
 
    textarea.value = textarea.value + text +'\n'; 
 
}

#cartlist{ 
 
    width : 100%; 
 
    height : 100px; 
 
    line-height : 30px; 
 
}

<textarea id="cartlist"></textarea> 
 
<a href="#" onclick="CopyToTextarea(this)">item name 1</a> 
 
<a href="#" onclick="CopyToTextarea(this)">item name 2</a> 
 
<a href="#" onclick="CopyToTextarea(this)">item name 3</a> 
 
<a href="#" onclick="CopyToTextarea(this)">item name 4</a>

アップデート＃1を行うことができます機能付きにどのような方法があります私がクリックしたかどうかを判断するもう一度、それはアクションを取って、リストから項目を削除するよりも？

function CopyToTextarea(el){ 
 
    var text = el.textContent,       // get this <a> text 
 
     textarea = document.getElementById('cartlist'), // textarea id 
 
     textareaValue = textarea.value,     // text area value 
 
     Regex = new RegExp(text + '\n', 'g'),   // make new regex with <a> text and \n line break 
 
     textareaValue = textareaValue.indexOf(text+'\n') > -1 ? textareaValue.replace(Regex, '') : textareaValue + text+'\n'; // this is something similar to if statement .. mean if the textarea has the <a> text and after it line break .. replace it with its line break to blank (remove it) .. if not its not on textarea add this <a> text to the textarea value 
 
    textarea.value = textareaValue ;      // change the textarea value with the new one 
 
}

#cartlist{ 
 
    width : 100%; 
 
    height : 100px; 
 
    line-height : 30px; 
 
}

<textarea id="cartlist"></textarea> 
 
<a href="#" onclick="CopyToTextarea(this)">item name 1</a> 
 
<a href="#" onclick="CopyToTextarea(this)">item name 2</a> 
 
<a href="#" onclick="CopyToTextarea(this)">item name 3</a> 
 
<a href="#" onclick="CopyToTextarea(this)">item name 4</a>

Answer 2

$('a').click(function(e) { 
 
    var txtarea = $('#cartlist').val(); 
 
    var txt = $(e.target).text(); 
 
    $('#cartlist').val(txtarea + txt + '\n'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<textarea id="cartlist"></textarea> 
 
<a href="#">item name 1</a> 
 
<a href="#">item name 2</a> 
 
<a href="#">item name 3</a> 
 
<a href="#">item name 4</a>

Answer 3

このような何か：必要ありませんjQueryのか、他のライブラリ。あなたが行くここ

var cartlist = document.querySelector('#cartlist'); 
 
var items = document.querySelectorAll('[data-item]'); 
 

 
[].forEach.call(items, function(item) { 
 
    item.addEventListener('click', function(){ 
 
     cartlist.value += "\n" + item.innerHTML; 
 
    }); 
 
});

#cartlist { 
 
    width: 100%; 
 
    height: 100px; 
 
}

<textarea id="cartlist">items will be copied here when you click on them</textarea> 
 
<br /> 
 
<a href="#" data-item="1">item name 1</a> 
 
<a href="#" data-item="2">item name 2</a> 
 
<a href="#" data-item="3">item name 3</a> 
 
<a href="#" data-item="4">item name 4</a>

Answer 4

。

var cartElement = document.getElementById("cartlist"); 
 

 
function trigger(event) { 
 
    var item = event.innerHTML; 
 
    cartElement.append(item + "\n"); 
 
}

<textarea id="cartlist"></textarea> 
 
<a href="#" onclick="trigger(this)">item name 1</a> 
 
<a href="#" onclick="trigger(this)">item name 2</a> 
 
<a href="#" onclick="trigger(this)">item name 3</a> 
 
<a href="#" onclick="trigger(this)">item name 4</a>