无法点击或编辑textarea问题排查（附相关代码）

问题描述 #

点击Edit按钮后，textarea能正常显示内容，但无法进行点击或编辑操作。

问题原因 #

1. 标签拼写错误：JavaScript创建元素时写的是texarea，正确的HTML标签名是textarea。浏览器无法识别错误标签，会将其渲染成普通不可编辑元素。
2. 变量未声明：div和post变量未用let/const声明，属于全局变量，可能引发潜在冲突。
3. 属性设置错误：设置列数时使用了columns，textarea的正确属性名是cols。

修复后的JavaScript代码 #

function edit(btn) {
  const div = document.getElementById(`div${btn.dataset.id}`);
  const post = document.getElementById(`post${btn.dataset.id}`);
  post.remove();
  
  const text_area = document.createElement('textarea');
  text_area.textContent = post.textContent;
  text_area.setAttribute('rows', '4');
  text_area.setAttribute('name', 'contents');
  text_area.setAttribute('cols', '50'); // 修正属性名，同时调整数值让输入区域更合理
  
  div.append(text_area);
  // 可选：自动聚焦到文本框，提升用户体验
  text_area.focus();
}

额外优化建议 #

• HTML中多个元素使用了相同的id="creator_post"，违反HTML id唯一性规范，建议改为class：<div class="creator_post">，同时CSS中对应修改为.creator_post。
• 可为textarea添加自定义样式，优化视觉体验。

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