Why are all textareas being updated onchange?

Question

I'm trying to add a placeholder in the descrip <textarea> if the related process <textarea> is not empty. However, when I type some text in any process <textarea> a placeholder is added to all of my descrip <textarea>'s.

I think it has something to do with how I'm selecting the descrip <textarea>'s in my querySelectorAll. However, in my project I do the exact same thing with radio buttons and it works just fine.

I've written my loop using .forEach and with a standard for-loop, but I still get the same result.

Below is a replicable example of what I'm trying to accomplish.

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>

mplungjan · Answer

Typo - missing .value

This is more elegant - using delegation

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";
  }
})

Why are all textareas being updated onchange?

1 Answers