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!

Sercan · Accepted Answer · 2022-02-08 00:16:45Z

0

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>

edited Feb 8, 2022 at 0:16

answered Feb 7, 2022 at 21:43

Sercan

5,1433 gold badges23 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Brian Over a year ago

Thank you but didn't work. I'm trying to modify the inner.HTML using a button and I got this error TypeError: Cannot set properties of null (setting 'innerHTML') when I try the following code: function() { try{ textarea = document.getElementById("textarea"); this.textarea.innerHTML = 'asd'; }catch(error){ console.log(error); } }

Sercan Over a year ago

There could be several reasons for this. First, this can be a problem if an element does not contain the id value "textarea". Second, this issue occurs if the definition in <script> is defined before the <body> tag.

Brian Over a year ago

I'm not even sure if document.getElementById works on lightning to be honest. It's lightning for Salesforce, the id is there and I'm not sure what else I could check. Thanks a lot for answer.

Collectives™ on Stack Overflow

How to edit lightning-textarea programatically in Lightning

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related