Changing the value of a Textarea in javascript

Question

I don't know how to change the value of data-initial-value (highlighted in red in the picture) with in the textarea div. I have tried using .innertext with the input "hi" but you can see that it only changes the inner text and has no effect on the value of data-initial-value. I am working on an extension for Google Meet and would like the type in the chat box and hit send. So whenever something is typed into the chat box, Google Meet sets the value of the input to data-initial-value and not the innerText. So how do I change the value of data-initial-value?

Things I have tried that do not work:

document.querySelector(".KHxj8b").innerText = "hello world";

document.querySelector(".KHxj8b").value = "hello world";

Images Below:

---

Answer 1

You will need to use setAttribute(), since data-initial-value is an attribute of that tag.

document.querySelector(".KHxj8b").setAttribute("data-initial-value", "The value");

Change "The value" to what ever you want it to be.

Answer 2

You have to setAttribute('data-initial-value', yourvalue);

Answer 3

Use set attribute method: https://www.w3schools.com/jsref/met_element_setattribute.asp

document.querySelector(".KHxj8b").setAttribute("data-initial-value", "The value");

Also if it ain't working and you think you can delete that attribute then use JS to delete it. But it may break a few functionalities

element.removeAttribute(attributename)

Here the element is document.querySelector(".KHxj8b"). and attribute is data-initial-value