How to edit lightning-textarea programatically in Lightning

Question

I'm trying to find a way to modify the value of my lightning-textarea.

Not the variable that holds the value internally.

Things like document.getElementById('textarea').value = 'value';are not working.

My Textarea:

<lightning-textarea id="textarea" type="text" label="Enter some text" onchange={handleInputChange}></lightning-textarea>

Thanks!

Answer 1

In the solution below, clicking the item changes its content. The Element.innerHTML property or the Element.insertAdjacentHTML() method can be used to change the content of the element.

 let textarea = document.getElementById("textarea"); let textarea2 = document.getElementById("textarea2"); /* Clicking on the item fires the following event. */ textarea.addEventListener('click', function(event) { textarea.innerHTML = "Clicked First Element"; }); /* Clicking on the item fires the following event. */ function clickEvent() { try { this.textarea2.innerHTML = "Clicked Second Element"; } catch(error) { console.log(error); } }

 #textarea, #textarea2 { border: 1px solid red; padding: 10px; }

 <!-- First Element --> <br><lightning-textarea id="textarea" type="text" label="Enter some text">First</lightning-textarea><br><br><br> <!-- Second Element --> <lightning-textarea id="textarea2" type="text" label="Enter some text" onclick="clickEvent()">Second</lightning-textarea>