Clear lightning-input and lightning-textarea on click?

Question

Looking to reset the two text fields labeled 'Name' and 'Description' when the 'Cancel' button is clicked. However, I'm getting the error ' [document.getElementById(...) is null]'. After some research, I've learned this error appears when the JS is within the same file as the HTML, but this JS is in a separate file and is nested within the button click, so the fields already exist. I've tried setting the value to a blank string, as well as resetting it using the .reset() method.

The HTML:

<lightning-input label="Name" id="nameInput" name="nameInput"></lightning-input>
<lightning-textarea label="Description" id="descriptionInput" name="descriptionInput"></lightning-textarea>
<lightning-button label="Cancel" onclick={cancelStep}></lightning-button>

The JS:

cancelStep(){
    document.getElementById('nameInput').value = '';
    document.getElementById('descriptionInput').value = '';
    //document.getElementById('nameInput').reset();
    //document.getElementById('descriptionInput').reset();
}

Answer 1

declare class in lightning-input and try this code below :

this.template.querySelector('nameInput').reset();