Clear custom input text field

Question

i have a custom search bar created using LWC in wich i can write something, but i have 2 problems:

1: I can't figure how to make a clear button that reset what it is inside the input search bar if the user press the X button 2: I would like that the consolelog visualize every text change and not only when i press enter

here is my HTML:

<template>

    <div class="slds-form-element containerPadre">
        <label class="slds-form-element__label slds-text-heading_medium slds-text-color_inverse" for="text-input-id-74"> something </label>


        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_left-right containerSearch">
            <!-- icona search -->

            <svg class="slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default" aria-hidden="true">
                <use xlink:href="/apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
            </svg>

            <input type="text" id="text-input-id-74" placeholder="search something" class="slds-input" onchange={searchValue}>

            <button class="slds-button slds-button_icon slds-input__icon slds-input__icon_right" title="Clear" onclick={clearData} >
                <svg class="slds-button__icon slds-icon-text-light" aria-hidden="true" >
                    <use xlink:href="/apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#clear" ></use>
                </svg>
                <span class="slds-assistive-text">Clear</span>
            </button>
        </div>

    </div>
</template>

My CSS:

.containerPadre {
    height: 10cm;
    width: 30cm;
    background-color: #001489;
    text-align: center;
}

.lgc-bg {
    text-align: center;
}
.labelText {
        text-align: center;
    padding-top: 0.5cm;
}

And my JavaScript:

import {LightningElement} from 'lwc';

export default class SearchBar extends LightningElement {


    function
    clearData() {
        document.getElementById("text-input-id-74").value = "";
    }

    searchValue(event) {
        {
            this.name= event.target.value;
            console.log(event.target.value);
        }
    };
}

Answer 1

You should try using LWC input component, instead of the standard <input> tag, and then you can bind a variable to its value, something like this:

<lightning-input type="text" label="Enter some text" onchange={handleInputChange} value={searchTerm}></lightning-input>

then in your js controller, create a new variable (the one you used on the input's value attribute) and the proper handlers:

export default class InputTextAdvanced extends LightningElement {

    searchTerm;

    handleInputChange(event) {
        // gets updated every time you type a new character.
        this.searchTerm = event.detail.value;            
        console.log(this.searchTerm)
    }
    clearData() {
        // this variable is bound to the input text, so setting it to null, will 
        // clear input text 
        this.searchTerm = null;
    }
}

So you don't need to look for any component's id in order to clear its value. hope this helps!

Answer 2

using document.getElementById("text-input-id-74"). is not a good practice in LWC.

Access Elements the Component Owns

additionally, using id's to identify dom elements in the markup is also not a good practice, because id's are dynamically changed upon rendering in lwc.

this might be the root cause of your issue.