javascript - How to send value to an div which has textbox role

Question

I am trying to send a new value to a div which has textbox role and I am getting this error:

Uncaught TypeError:document.querySelector(...).value is not a function at <anonymous>:1:59

HTML CODE

<div class="msg-form__contenteditable t-14t-black--light t-normal flex-grow-1 full-height notranslate"contenteditable="true" role="textbox"aria-multiline="true" aria-label="Write a message…">?
<p>
<br>
</p>
</div>

MY CODE It finds the element, but it doesn't send the value.

document.querySelector('[aria-label="Writea message…"]').value("Paul")

Answer 1

Here's some light reading on the textbox role. Straight from there:

It is a better practice to use an <input> element with type="text", or a <textarea> element instead of the ARIA textbox role. When using either semantic element, the ARIA textbox role is not necessary. See Notes on Using ARIA in HTML.

If you're set on using a <div>, value isn't a valid attribute for it, and you'll need to use .innerText or innerHTML

document.querySelector('[aria-label="Write a message…"]').innerHTML = 'Paul';

Also: .value() isn't a function (that's the error you're receiving). If you're trying to set the value of an element that value is a valid attribute for, you'll use element.value = 'Paul'; with JavaScript, or element.val('Paul'); with jQuery