How can you use querySelectorAll on textarea?

1

I have 3 forms and each have a textarea for comments. Is there a way to add a class of comments to each textarea, and use querySelectorAll and loop through them so that I can get the value of whichever form is submitted?

I’ve used querySelectorAll and forEach on buttons and then console.log whichever button I clicked. Is this still possible with textarea? Or not because it’s a form?

My code:

// get all form buttons
const formButtons = document.querySelectorAll(".formBtn");
// get all textarea boxes
const formInput = document.querySelectorAll("textarea");
    
// for each form button add an event listener
    formButtons.forEach ( function (formBtn){
        formBtn.addEventListener("click", function (){ 

// for each textarea console.log it when the form is submmited
            formInput.forEach ( function (comment){
                console.log(comment);
            });
        });
    });

My console:

<textarea id="1" class="formInput" rows="7" cols="130">

<textarea id="2" class="formInput" rows="7" cols="130">

<textarea id="3" class="formInput" rows="7" cols="130">

I only want the textarea of a specific form.

2

Tbh i dont really know. But you could test it out with an onChange event and a console.log to see if it does

3

I’d investigate putting the event handler on the forms and using the forms to differentiate between the events.

Do you know how to do this:

function submitHandler(event) {
console.log(event);
}
element.forEach(item => item.addEventListener("submit", submitHandler);

This could give you more information about the particular elements you’re working with, and you might find something to grab.

4

I updated my post to include my code. I’ll try what you gave me.

5

I don’t have time right now to work it out, but you might also try using a data attribute to tell them apart. Use one function to handle the click and then a control statement (if/then or switch) in the click-handler function. Put a data-attribute in the button and then use something like… event.target.getAttribute(“data-id=‘firstBtn’”) in the control statement.