如何为输入框添加blur事件监听器以更新关联可点击标签的href？

错误原因分析 #

1. 选择器不匹配：JS里用了.form-group.a input.published-link-input，但实际HTML结构里输入框的父元素是.col-12 mt-3，根本没有.form-group.a这个类，导致找不到输入框元素，事件绑定直接失败。
2. DOM节点遍历错误：this.parentNode.parent是无效写法，DOM对象里没有parent属性；而且标签是输入框的前一个兄弟元素，不是父级的父级，遍历路径完全错误。

修复后的代码 #

JavaScript代码

function addEventListeners() {
  // 修正选择器，匹配实际HTML里的输入框
  const publishedPostInputs = document.querySelectorAll('.col-12.mt-3 input.published-link-input');
  publishedPostInputs.forEach(input => {
    input.addEventListener('blur', function() {
      const link = this.value.trim(); // 去掉首尾空格，避免无效链接
      // 找到输入框前面的<a>标签（兄弟元素）
      const linkAnchor = this.previousElementSibling;
      if (linkAnchor && linkAnchor.tagName === 'A') {
        linkAnchor.setAttribute('href', link);
      }
    });
  });
}

关键修正说明

• 调整选择器，确保能正确选中目标输入框
• 用previousElementSibling直接获取输入框的前一个兄弟元素，路径更准确
• 增加trim()处理输入值，避免空格导致的无效链接
• 增加元素类型判断，确保找到的是标签，避免控制台报错

如果后续HTML结构调整，和输入框的兄弟关系改变，可以通过父容器查找，容错性更强：

function addEventListeners() {
  const publishedPostInputs = document.querySelectorAll('input.published-link-input');
  publishedPostInputs.forEach(input => {
    input.addEventListener('blur', function() {
      const link = this.value.trim();
      // 先找父容器，再在容器内查找<a>标签
      const parentContainer = this.parentNode;
      const linkAnchor = parentContainer.querySelector('a');
      if (linkAnchor) {
        linkAnchor.setAttribute('href', link);
      }
    });
  });
}

额外验证要点 #

确保addEventListeners()确实在卡片构建完成后执行了——比如放在DOMContentLoaded事件回调里，或者动态生成卡片后立即调用，否则事件绑定会因为元素未存在而失效。

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