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!
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>