原生JS的onclick功能改写为jQuery后报undefined如何解决

代码错误原因 #

• 事件参数认知错误：jQuery绑定的事件回调函数第一个入参是事件对象，不是被点击的DOM元素，你直接取a.textContent自然返回undefined。
• 冗余事件绑定未清理：你调整后的HTML仍然保留了onclick="CopyToTextarea(this)"属性，而你写的CopyToTextarea函数在jQuery闭包内，全局作用域访问不到，会额外抛出函数未定义的错误。
• 你之前的重复ID问题已经调整为class，这部分是正确的。

修正方案 #

第一步：清理HTML的冗余属性 #

删除所有a标签的onclick属性：

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

第二步：修正jQuery代码 #

两种写法可选，推荐第一种jQuery风格的写法：

写法1：纯jQuery语法

$(document).ready(function (){
    $(".legend_tag").click(function (e) {
        // 阻止a标签默认跳转行为，避免页面跳至顶部
        e.preventDefault();
        // 获取当前点击元素的文本内容
        const clickText = $(this).text();
        // 追加内容到文本域
        $('#cartlist').val((_, originVal) => originVal + clickText + '\n');
    });
});

写法2：保留原生DOM操作逻辑

如果你习惯原生DOM操作的写法，只需要修正元素获取逻辑即可：

$(document).ready(function (){
    $(".legend_tag").click(function (e) {
        e.preventDefault();
        // 回调内的this就是当前被点击的DOM元素
        var text = this.textContent;
        var textarea = document.getElementById('cartlist');
        textarea.value = textarea.value + text +'\n';
    });
});

内容的提问来源于stack exchange，提问作者user16409170