Activate a time text input after the user selects OTHER option - html

Question

In my HTML:
<div class="main">
<label>Select an option </label>
<select>
<option value="user123"> user123 </option>
<option value="user234"> user234 </option>
<option value="user345"> user345 </option>
<option value="user456"> user456 </option>
<option value="Other"> Other </option>
</select>
<input type="text" style="visibility:hidden" maxlength="7" id="custom" </input>
</div>
In my typescript:
if(input=="Other") {
(<HTMLInputElement>document.getElementByID('custom').removeAttribute('style')
}
By doing this, it will activate a text box when the user select Other from the dropdown. But if the user changes his/her mind to the regular option(without activating the text box), the text box will still stay. I understand the cause of this issue is because I removed the hidden attribute. So is there a way to show the text box only when the user select Other and hide the text box for other cases.
Another question is how to force the user to only input "userXXX" into the text box?
Thank you!

Answer 1

I would just use a boolean to show and hide the element. So check if the checkbos is checked, and set it to visible, otherwise set it to false
var element = <HTMLInputElement> document.getElementById("otherchk");
var isChecked = element.checked;
isChecked ? this.isVisible : !this.isVisible
Then use the hidden selector in your html
<div class="main">
<label>Select an option </label>
<select>
<option value="user123"> user123 </option>
<option value="user234"> user234 </option>
<option value="user345"> user345 </option>
<option value="user456"> user456 </option>
<option value="Other" id="otherchk"> Other </option>
</select>
<input type="text" [hidden]="isVisible == false" maxlength="7" id="custom" </input>
</div>