如何使用onclick事件或jQuery清空textarea文本内容？

嘿，我发现你代码里的清空功能失效是因为一个语法小错误——getElementById是方法，得用括号()调用，而不是方括号[]。下面给你两种靠谱的实现方案：

原生JavaScript修正版 #

直接修正你原来的代码，同时优化一下链接的默认行为：

<div class="form-group col-sm-12">
  <label class="control-label col-sm-3">System Main Message</label>
  <div class="col-sm-4">
    <textarea id="editor-area" name="sysMsg" class="form-control"><?PHP echo $mainIndex['sysMsg'] ?></textarea>
    <!-- 修正getElementById的调用语法，加上return false阻止页面跳转 -->
    <a href="#" onclick="document.getElementById('editor-area').value = ''; return false;">Clear message</a>
  </div>
</div>

• 关键修正：把document.getElementById['editor-area']改成document.getElementById('editor-area')
• 额外优化：添加return false，避免点击链接时页面跳转到顶部（因为href="#"的默认行为）

jQuery实现方案（更优雅） #

如果你的项目已经引入了jQuery，推荐把事件逻辑和HTML结构分离，代码更易维护：

<div class="form-group col-sm-12">
  <label class="control-label col-sm-3">System Main Message</label>
  <div class="col-sm-4">
    <textarea id="editor-area" name="sysMsg" class="form-control"><?PHP echo $mainIndex['sysMsg'] ?></textarea>
    <!-- 给链接加个ID，用来绑定事件 -->
    <a href="#" id="clear-message-btn">Clear message</a>
  </div>
</div>

<script>
// 确保DOM加载完成后再绑定事件
$(document).ready(function() {
  $('#clear-message-btn').click(function(event) {
    event.preventDefault(); // 阻止链接的默认跳转行为
    $('#editor-area').val(''); // 清空textarea的内容
  });
});
</script>

• 优势：把JS逻辑从HTML里抽离出来，后续修改或扩展功能更方便
• event.preventDefault()和原生方案里的return false作用一致，都是避免页面跳转

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