为何所有descrip文本框会随任意process文本框的onchange事件更新？

核心问题 #

1. 判断条件错误：你写的processes[i] != ""是把DOM元素对象和空字符串比较，这永远为true（对象与字符串类型不同，比较结果恒为真），导致所有descrip下的textarea都会被设置placeholder为"Describe"。
2. 逻辑不符合需求：每次任意一个process文本框触发change事件时，你都会遍历所有process和descrip，导致所有关联文本框都被处理，而非只处理当前输入框对应的那一个。

修正方案 #

利用DOM结构关联性（同一个<tr>下的元素），直接定位当前输入框对应的目标textarea，精准且高效：

修正后的JavaScript代码

const processes = document.querySelectorAll(".process > textarea");

// 给每个process文本框绑定实时输入事件
processes.forEach((proc) => {
  proc.addEventListener("input", () => {
    // 找到当前输入框所在的行，再定位该行内的descrip文本框
    const targetDescrip = proc.closest("tr").querySelector(".descrip > textarea");
    // 根据当前输入内容设置placeholder
    targetDescrip.placeholder = proc.value.trim() !== "" ? "Describe" : "";
  });
});

说明

• 用input事件代替change：change仅在文本框失去焦点时触发，input会实时响应输入，体验更流畅。
• 通过closest("tr")快速定位当前输入框所在行，再用querySelector找到该行内的目标文本框，确保只处理关联元素。
• 用trim()过滤输入空格，避免用户误输入空格触发规则。

若坚持保留循环逻辑（不推荐，效率较低） #

如果一定要用遍历方式，需修正判断条件，确保每个process对应正确的descrip：

const processes = document.querySelectorAll(".process > textarea");
const descrips = document.querySelectorAll(".descrip > textarea");

function descError() {
  for (let i = 0; i < processes.length; i++) {
    // 修正判断：基于文本框的value值判断
    const hasContent = processes[i].value.trim() !== "";
    descrips[i].placeholder = hasContent ? "Describe" : "";
  }
}

processes.forEach((proc) => proc.addEventListener("input", descError));

该方式每次输入都会遍历所有元素，当行数量较多时，性能不如第一种方案。

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