I am trying to get the value of the textarea element in my form using plain JavaScript events. I am using Vue.js (I am not using v-model as the form will be dynamically generated so there could be more than 1 for example). I have tried a few different approaches. I can seem to grab everything other than the textarea element
console.log(event.target.closest("textarea"));
console.log(event.target.parentNode.closest("textarea"));
console.log(event.target.parentNode.closest("form textarea"));
console.log(event.target.parentNode.closest("form > textarea"));
console.log(event.target.parentNode.closest("textarea > form"));
.closest() searches for the closest parent element, not a child element. Use that to find the enclosing form.
Then use .querySelector() to search for a descendant element starting from there.
console.log(event.target.closest("form").querySelector("textarea").value);
If you're using a form to submit the values, you can make use of the FormData object to parse all inputs:
const formElement = document.getElementById('form');
formElement.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(event.target);
console.log(formData.get('textValue'));
});<form id="form">
<textarea name="textValue">Lorem ipsum dolor</textarea>
<br />
<input type="submit" value="Submit" />
</form>