Boton mas y menos

belzebux · #1 (**permalink**) 14/11/2013, 11:08

Holasss, por favor una ayuda, tengo muchas de estas estructuras ya que varia la cantidad de acuerdo a la cantidad de registros que se listan desde la base de datos...osea puedo tener solo una como puedo tener 20 ...

Código HTML:

Ver original<button class="btn" type="button" id="menos">-</button>
<input id="cantidad" type="text" style="text-align: center;" value="1">
<button class="btn" type="button" id="mas">+</button>

quisiera que me ayuden con una funcion que al hacerle click al boton #mas, incremente en 1 en #cantidad, las veces que se hayan dado click y hacer lo contrario cuando se de click en #menos, pero que solo llegue a 1. Pero esto debera ser independientemente en cada estructura. Nose si deberia ser una funcion por cada estructura ya que se debe indicar el id en la funcion o si hay alguna forma de hacer una sola funcion con la que funcionen todas esas estructuras que tengo.
Ojala m puedan ayudar... mil gracias desde ya

belzebux · #2 (**permalink**) 14/11/2013, 11:34

he hecho esta funcion:

Código HTML:

Ver original<html> 
<body> 
<script language="javascript"> 
var i = 1; 
function contadormas(){ 
    i = i + 1; 
    var cant = document.getElementById("cantidad"); 
    cant.value = i;
    if(cant.value == 1){
            i=1;
            cant.value="unica";
    }
}
function contadormenos(){ 
    if(i>=2){
        i = i - 1; 
        var cant = document.getElementById("cantidad"); 
        cant.value = i;
        if(cant.value == 1){
            i=1;
            cant.value="unica";
        }
    }
}
</script>
<button class="btn" type="button" id="menos" onclick="javascript: contadormenos()">-</button>
<input id="cantidad" type="text" style="text-align: center;" value="1">
<button class="btn" type="button" id="mas" onclick="javascript: contadormas()">+</button>
</body> 
</html>

Con esto ya puedo aumentar o disminuir haciendo click en los botones mas o menos, le aumente una validacion para que cuando llegue a 1 aparezca "unica".

Pero bueno con esto resolvi mi primer problema, ahora mi otro problema es: asi como estan las funciones tendria que hacer una nueva por cada grupo de boton/input/boton que tenga, lo cual me daria un codigo tremendo y por otro lado no puedo saber cuantos grupos boton/input/boton voy a tener, ya que eso dependera del listado que obtenga de la base de datos...
Por favor una ayuda... gracias..

belzebux · #3 (**permalink**) 14/11/2013, 12:15

Jajaja gracias a todos por su inmensa ayuda xD jajaja... bueno los masters han de estar ocupados y este foro me ha ayudado mucho... encontre la solucion a mi problema si alguien lo necesita aqui lo dejo:

Código HTML:

Ver original<html> 
<body> 
<script language="javascript"> 
var i;
function contadormas(iddeinput){ 
    var cant = document.getElementById(iddeinput); 
    if(cant.value>=2){
        i = cant.value;
    }else{
        if(cant.value == "unica"){i = 1;}
    }
    i++; 
    cant.value = i;
}
function contadormenos(iddeinput){
    var cant = document.getElementById(iddeinput); 
    if(cant.value>2){
        i = cant.value;
        i--;
        cant.value = i;
    }else{
        cant.value="unica";
    }
}
</script>
<button class="btn" type="button" id="menos" onclick="javascript: contadormenos('cantidad1')">-</button>
<input id="cantidad1" type="text" style="text-align: center;" value="unica">
<button class="btn" type="button" id="mas" onclick="javascript: contadormas('cantidad1')">+</button>
 
<button class="btn" type="button" id="menos" onclick="javascript: contadormenos('cantidad2')">-</button>
<input id="cantidad2" type="text" style="text-align: center;" value="unica">
<button class="btn" type="button" id="mas" onclick="javascript: contadormas('cantidad2')">+</button>
 
<button class="btn" type="button" id="menos" onclick="javascript: contadormenos('cantidad3')">-</button>
<input id="cantidad3" type="text" style="text-align: center;" value="unica">
<button class="btn" type="button" id="mas" onclick="javascript: contadormas('cantidad3')">+</button>
 
<button class="btn" type="button" id="menos" onclick="javascript: contadormenos('cantidad4')">-</button>
<input id="cantidad4" type="text" style="text-align: center;" value="unica">
<button class="btn" type="button" id="mas" onclick="javascript: contadormas('cantidad4')">+</button>
</body> 
</html>

a tener en cuenta que yo creo el grupo boton/input/boton con un for dependiendo la cantidad de elementos que me lista la consulta a la base de datos y les voy dando como id=cantidad+i para que se enumeren cantidad1, cantidad2, etc... un saludo a todos.

belzebux · #4 (**permalink**) 14/11/2013, 12:17

no le pongo solucionado, porque aun me gustaria q un master lo vea y me diga si esa es la mejor manera de resolver mi problema o si hay algun error o me dan algun consejo, por favor digan algooooo jaja y gracias

marlanga · #5 (**permalink**) 14/11/2013, 12:55

A los elementos button no tienes que ponerles el atributo 'type="button"'.
El código, parece que funciona, pero a mi no me gusta nada que se meta código javascript dentro de los elementos HTML, como por ejemplo haces con el atributo "onclick" (al igual que tampoco nadie recomienda que se meta estilos CSS en ellos).
Si tu código HTML crece, y/o necesitas modificar códigos en el futuro, si sigues así será una locura hacerlo.

Yo lo cambiaría por:
http://jsfiddle.net/5WdvA/

Código HTML:

Ver original<button id="btn1">-</button><input type="text" id="txt" /><button id="btn2">+</button>

Código Javascript:

Ver originalwindow.onload=function(){
    var sumar=function(cantidad,txt){
        txt.value=(!isNaN(txt.value) && txt.value!="")?parseInt(txt.value)+cantidad:0;
    }
    var SUMADOR1={
        btnResta: document.getElementById("btn1"),
        btnSuma: document.getElementById("btn2"),
        txt: document.getElementById("txt")
    };
    SUMADOR1.btnResta.onclick=function(){ sumar(-1,SUMADOR1.txt); };
    SUMADOR1.btnSuma.onclick=function(){ sumar(1,SUMADOR1.txt); };
}

belzebux · #6 (**permalink**) 20/11/2013, 12:07

marlanga mil gracias por tu respuesta, no he respondido antes ya que estuve ocupado, pero volviendo al tema: he revisado lo que me has dicho y llegue a esta solucion, haber si me ayudas con algun consejo...
La solucion que me mandast era muy buena, pero recuerda que yo voy a tener "n" cantidad de grupos botonMenos/input/botonMas, ya que esto va a ser dependiendo de la cantidad de registros en la base de datos. Por ello necesito una funcion generica, lo que he hecho es hacer una llamada por clases y no por id..

Código HTML:

Ver original<div>
<button class="resta">-</button>
<input class="qwerty" value="unica">
<button class="suma">+</button>
</div>

Código Javascript:

Ver originalvar i;
    $('.resta').click(function(){
        var padre = $(this).parent("div");
        var valor = $(padre).children(".qwerty").val();
        if(valor>2){
            i = valor;
            i--;
            $(padre).children(".qwerty").val(i);
        }else{
            $(padre).children(".qwerty").val("unica");
        }
    })
    
    $('.suma').click(function(){
        var padre = $(this).parent("div");
        var valor = $(padre).children(".qwerty").val();
        if(isNaN(valor) && valor>1){
            i = valor;
        }else{
            if(valor == "unica"){i = 1;}
        }
        i++; 
        $(padre).children(".qwerty").val(i);
    })

Desde ya gracias por cualquier comentario.

marlanga · #7 (**permalink**) 24/11/2013, 11:38

Pues se pone un FOR y se crean varios. Uso una técnica avanzada de javascript, closures, asi que atento.

Código HTML:

Ver original<button id="btnm0">-</button><input type="text" id="txt0" /><button id="btnp0">+</button><br/>
<button id="btnm1">-</button><input type="text" id="txt1" /><button id="btnp1">+</button><br/>
<button id="btnm2">-</button><input type="text" id="txt2" /><button id="btnp2">+</button><br/>
<button id="btnm3">-</button><input type="text" id="txt3" /><button id="btnp3">+</button><br/>
<button id="btnm4">-</button><input type="text" id="txt4" /><button id="btnp4">+</button><br/>
<button id="btnm5">-</button><input type="text" id="txt5" /><button id="btnp5">+</button><br/>

Código Javascript:

Ver originalwindow.onload=function(){
    var sumar=function(cantidad,txt){
        txt.value=(!isNaN(txt.value) && txt.value!="")?parseInt(txt.value)+cantidad:0;
    }
    var SUMADORES=[];
    for (var i=0;i<6;i++)
    {
        var obj= {
            btnResta: document.getElementById("btnm"+i),
            btnSuma: document.getElementById("btnp"+i),
            txt: document.getElementById("txt"+i)
        };
        (function (aux) { 
            aux.btnResta.onclick=function(){ sumar(-1,aux.txt); };
            aux.btnSuma.onclick=function(){ sumar(1,aux.txt); }; 
        })(obj);
        SUMADORES.push(obj);
    }
}

Demo:
http://jsfiddle.net/5WdvA/1/