descrip <textarea>如果相關process <textarea>不為空，我正在嘗試在其中添加一個占位符。process <textarea>但是，當我在任何一個占位符中鍵入一些文本時，我的所有descrip <textarea>.
我認為這與我如何descrip <textarea>在我的querySelectorAll. 但是，在我的專案中，我使用單選按鈕執行完全相同的操作，并且效果很好。
我已經使用.forEach and和標準撰寫了我的回圈for-loop，但我仍然得到相同的結果。
下面是我正在嘗試完成的可復制示例。
const processes = document.querySelectorAll(".process > textarea");
const descrips = document.querySelectorAll(".descrip > textarea");
function descError() {
for (var i = 0; i < processes.length; i ){
if(processes[i] != ""){
descrips[i].placeholder = "Describe";
} else{
descrips[i].placeholder = "";
}
}
}
processes.forEach((proc) => proc.addEventListener("change", descError));<table>
<tr>
<td class="process" ><textarea></textarea></td>
<td class="descrip"><textarea></textarea></td>
</tr>
<tr>
<td class="process"><textarea></textarea></td>
<td class="descrip"><textarea></textarea></td>
</tr>
<tr>
<td class="process"><textarea></textarea></td>
<td class="descrip"><textarea></textarea></td>
</tr>
</table>
uj5u.com熱心網友回復：
錯字 - 缺少 .value
這更優雅 - 使用委托
document.getElementById("tb").addEventListener("input", e => {
const tgt = e.target;
if (tgt.closest("td").matches(".process")) {
tgt.closest("tr").querySelector(".descrip textarea").placeholder = tgt.value.trim() === "" ? "" : "Describe";
}
})<table>
<tbody id="tb">
<tr>
<td class="process"><textarea></textarea></td>
<td class="descrip"><textarea></textarea></td>
</tr>
<tr>
<td class="process"><textarea></textarea></td>
<td class="descrip"><textarea></textarea></td>
</tr>
<tr>
<td class="process"><textarea></textarea></td>
<td class="descrip"><textarea></textarea></td>
</tr>
</tbody>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/507812.html
標籤：javascript html 查询选择器
下一篇：為什么盒子右側有空間？