使用jQuery将<td>元素内容复制到退款金额输入框的实现问题

原有代码的核心问题 #

• 初始化阶段就直接把#grand_total、#refund_amount的innerHTML文本存为普通变量，没有保留DOM元素本身的引用，后续根本无法操作实际页面元素
• 事件绑定参数完全错误：addEventListener的第一个参数必须是合法的事件类型（如click、change），原代码传入的'#refund_amount'是选择器字符串，不具备任何事件绑定作用
• 对输入框的操作逻辑错误：文本输入框的内容必须通过value属性读写，使用innerHTML设置输入框内容完全无效
• 没有按照jQuery语法实现需求，原生DOM实现的逻辑全链路错误

可直接运行的实现代码 #

// 等待页面DOM加载完成后执行
$(function() {
  // 读取总计td的文本内容，去除首尾多余空格
  const totalValue = $('#grand_total').text().trim();
  // 将读取到的内容填充到退款金额输入框
  $('#refund_amount').val(totalValue);

  // 若需要点击总计字段时再触发填充，可替换为以下绑定逻辑
  // $('#grand_total').on('click', function() {
  //   $('#refund_amount').val($(this).text().trim());
  // });
});

实现逻辑仅做元素间的内容传递，没有额外的格式校验、事件拦截等冗余逻辑，完全匹配跨元素复制内容的需求。

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