How can you use querySelectorAll on textarea?

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){

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.

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

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) {
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.

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

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…“data-id=‘firstBtn’”) in the control statement.