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 ><textarea></textarea></td>
<td ><textarea></textarea></td>
</tr>
<tr>
<td ><textarea></textarea></td>
<td ><textarea></textarea></td>
</tr>
<tr>
<td ><textarea></textarea></td>
<td ><textarea></textarea></td>
</tr>
</table>
CodePudding user response:
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";
}
})
<table>
<tbody id="tb">
<tr>
<td ><textarea></textarea></td>
<td ><textarea></textarea></td>
</tr>
<tr>
<td ><textarea></textarea></td>
<td ><textarea></textarea></td>
</tr>
<tr>
<td ><textarea></textarea></td>
<td ><textarea></textarea></td>
</tr>
</tbody>
</table>