JavaScript - Función para incrementar/ decrementar valor en Input

 
Vista:
sin imagen de perfil
Val: 9
Ha aumentado su posición en 121 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Función para incrementar/ decrementar valor en Input

Publicado por Daniel (3 intervenciones) el 13/08/2018 20:14:41
Hola! desde ya muchisimas gracias por sus ayudas. Tengo el siguiente inconveniente =

Estoy programando en el Framework Angular 6 con Typescript. En la vista html tengo (entre otras cosas) 2 botones los cuales suman y restan respectivamente un valor que se muestra en el INPUT. Es decir al presionar en el botón "+" (mas) incrementa en 1 el valor del input, y lo contrario con el botón "-" (menos). Yo lo que quiero es poder recibir en la función "incrementar" que se activa al presionar dicho botón, el valor de ese input para luego sumarle 1 y poder volver a mostrar ese incremento nuevamente en dicho input. Ya que de la forma en que lo hice no es correcta y me tira error porque no reconoce el ".value" cuando quiero obtener dicho valor. Copio y pego mi código tanto de la vista como del controlador.

VISTA HTML =

<form >


<table *ngFor="let menu of allMenu" >
<th *ngIf="show"> {{menu.tipoRubroMenu}}</th>


<tr *ngFor="let item of menu.itemsRubro; let i = index;" >
<td>{{item.nombre}}</td>
<td>......... ${{item.precio}}</td>
<input type="number" value="0" id={{item.nombre}} name={{item.nombre}} disabled>
<td><button (click) ="incrementar(item.nombre)">+</button></td>
<td><button (click) ="decrementar(item.nombre)">-</button></td>

</tr>

</table>

<button (click)="makeAnOrder()">Realizar Pedido</button>

</form>


CONTROLADOR (solo las funciones en las que tengo dudas) =

incrementar(item): void{

let valor = document.getElementById(item).value; //ACA NO RECONOCE EL ".VALUE", AL IGUAL QUE TODOS LOS DEMAS
valor++;
document.getElementById(item).value = valor;
console.log(item);

}

decrementar(item): void {

let valor = document.getElementById(item).value;
if (valor > 0) {
valor--;
document.getElementById(item).value = valor;
console.log(item);
}
}

Podrían darme una mano con esto? o decirme donde puedo ver ejemplos para orientarme? Sería de gran ayuda!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Función para incrementar/ decrementar valor en Input

Publicado por ScriptShow (692 intervenciones) el 16/08/2018 16:53:19
Saludos Daniel,

un ejemplo en JavaScript nativo sería:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form >
<input type="text" value="0" id="item" name="item" disabled>
<button onclick="incrementar()">+</button>
<button onclick="decrementar()">-</button>
<button onclick="makeAnOrder()">Realizar Pedido</button>
</form>
 
<script>
function incrementar() {
valor = document.getElementById("item");
if (valor.value < 10)valor.value ++;
}
 
function decrementar() {
valor = document.getElementById("item");
if (valor.value > 01)valor.value --;
}
 
function makeAnOrder() {
document.write("<h2>Su pedido se está en curso...</h2>");
}
</script>

Para entender bien cómo funciona el Script. Con esa base, puedes adaptar, modificar y ampliar cuanto quieras...

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar