点击按钮获取textarea内容执行函数后输出到div的实现及代码问题排查

现有代码错误列表 #

• 按钮选择器不匹配：HTML中按钮id为return-value，JS中使用#output-button作为选择器，无法获取到按钮元素，点击事件完全不生效
• 传参错误：调用reverseNumber时传入的是textarea DOM对象本身，而非用户输入的内容，导致处理的是[object HTMLTextAreaElement]字符串而非用户输入
• 取值逻辑错误：reverseNumber执行后返回的是处理完成的字符串，字符串不存在value属性，最终输出会是undefined
• 变量未声明：textAreaValue未用let/const声明，会隐式挂载为全局变量，严格模式下直接报错
• 功能不匹配：需求是实现字母按序排列的函数，现有代码写的是反转内容的函数，和需求不符
• HTML结构不规范：textarea重复定义id属性，label的for属性值和textarea的id不匹配，点击label无法自动聚焦输入框

实现思路 #

1. 修正HTML结构，保证元素id唯一、表单控件关联正确
2. 编写符合需求的自定义处理函数，增加输入合法性校验
3. 使用匹配的选择器获取DOM元素
4. 绑定点击事件逻辑：
   • 获取textarea输入的文本内容
   • 非空校验后传入自定义函数处理
   • 将处理结果写入输出div，优先使用textContent避免XSS注入风险

完整可运行代码 #

HTML部分 #

<form action="">
  <label for="text-area" title="object">JavaScript function that returns a passed string with letters in alphabetical order</label>
  <textarea id="text-area" name="object-name" cols="30" rows="5"></textarea>
  <input type="button" value="RETURN" id="return-value" />
  <div id="output"></div>
</form>

JS部分 #

// 自定义函数：将输入字符串的字母按字母顺序排序，可按需替换为其他处理逻辑
const sortLetters = str => {
  // 先去除两端空格，再拆分字符、排序、拼接
  return str.trim().split('').sort().join('');
};

// 获取DOM元素，选择器和HTML id严格对应
const textAreaEl = document.querySelector('#text-area');
const submitButtonEl = document.querySelector('#return-value');
const outputAreaEl = document.querySelector('#output');

// 绑定点击事件
submitButtonEl.addEventListener("click", () => {
  // 获取用户输入内容
  const inputContent = textAreaEl.value;
  // 非空校验
  if (!inputContent.trim()) {
    outputAreaEl.textContent = '请输入有效内容';
    return;
  }
  // 调用自定义函数处理内容
  const processedResult = sortLetters(inputContent);
  // 输出结果
  outputAreaEl.textContent = processedResult;
});

优化点说明 #

• 用textContent替代innerHTML，避免用户输入恶意HTML代码导致的XSS安全问题
• 增加输入非空校验，提升交互友好性
• 所有变量都用const声明（不需要修改的变量优先用const），避免全局变量污染
• 自定义函数逻辑和业务逻辑拆分，后续要替换处理规则只需修改sortLetters函数即可，维护成本更低

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