Currently, I am developing an eCommerce application that features a popup window for users when they click on "Add to Cart." This popup allows users to select product variations and quantities before adding the item to their cart. The popup consists of a select form and a number input field. My goal is to retrieve the user's input from these fields in order to display the correct information in the cart.
I attempted to access this information using the following code:
let input = (<HTMLInputElement>document.getElementsByClassName('number_input'));
However, this resulted in the following error:
ERROR in src/app/layout/products/products.component.ts(93,18): error TS2352: Type 'HTMLCollectionOf' cannot be converted to type 'HTMLInputElement'. Property 'accept' is missing in type 'HTMLCollectionOf'. src/app/layout/products/products.component.ts(111,14): error TS2352: Type 'HTMLCollectionOf' cannot be converted to type 'HTMLInputElement'.
As a result, the compilation failed. To address this issue, Visual Studio suggested including unknown alongside HTMLInputElement. Thus, I modified the code like so:
let input = (<HTMLInputElement><unknown>document.getElementsByClassName('number_input'));
However, this approach led to another error:
ERROR in src/app/layout/products/products.component.ts(91,37): error TS2304: Cannot find name 'unknown'. src/app/layout/products/products.component.ts(109,33): error TS2304: Cannot find name 'unknown'.
The HTML code below contains the structure of my inputs, utilizing a Bootstrap modal:
<div class="modal fade" id="variedades_y_cantidades" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="bebida_descripcion">AGREGAR {{ bebida.descripcion }}</h5>
</div>
<div class="modal-body">
<div class="row">
<div class="col"><div class="form-group">
<label for="variadedes">Variaded:</label>
<select class="form-control" id="variadedes">
<option *ngFor="let detalle of detalle_bebida">{{detalle.variedad}}</option>
</select>
</div></div>
<div class="row"><div class="col">Cantidad: <input type="number" name="cantidad" min="1" style="width: 70px;" class="number_input" value="1"></div></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">CERRAR</button>
<button type="button" class="btn btn-primary" (click)="onModalAgregarClick($event)" data-dismiss="modal">AGREGAR</button>
</div>
</div>
</div>
</div>
My objective is to retrieve the input data accurately without encountering any errors, enabling me to successfully compile the app for execution.