1

Tengo el siguiente campo para disminuir o aumentar la cantidad del mismo.

<span class="input-group-btn">
  <button class="btn btn-default" id="menos" type="button">-</button>
</span>

<input type="text" id="contador" value="1" min="1"/>

<span class="input-group-btn">
  <button class="btn btn-default" id="mas" type="button">+</button>
</span>

JS

var sumar = document.getElementById("mas");
var restar = document.getElementById("menos");
var contador = document.getElementById("contador");

sumar.onclick = function() {
  contador.value = Number(contador.value) + 1;
};

restar.onclick = function() {
  contador.value = Number(contador.value) - 1;
};

Así funciona si solo tuviera ese campo, pero como voy a agregarlos dinámicamente, la idea es que funcione para la cantidad de campos que haya.

Es decir si tuviera por ejemplo 3

<span class="input-group-btn">
  <button class="btn btn-default" id="menos" type="button">-</button>
</span>

<input type="text" id="contador" value="1" min="1"/>

<span class="input-group-btn">
  <button class="btn btn-default" id="mas" type="button">+</button>
</span>

<!------!>

<span class="input-group-btn">
  <button class="btn btn-default" id="menos" type="button">-</button>
</span>

<input type="text" id="contador" value="1" min="1"/>

<span class="input-group-btn">
  <button class="btn btn-default" id="mas" type="button">+</button>
</span>

<!------!>

<span class="input-group-btn">
  <button class="btn btn-default" id="menos" type="button">-</button>
</span>

<input type="text" id="contador" value="1" min="1"/>

<span class="input-group-btn">
  <button class="btn btn-default" id="mas" type="button">+</button>
</span>

Pero de esos 3 solo me funciona 1.

1
  • En principio solo te funciona para uno porque estas agregando el mismo id en todos los input, recuerda que id es un identificador único y no se repite, con las clases puedes referenciar a varios elementos pero el resultado seria único, tendrás que agregar un id único a cada input y generar su respectiva función para cada operación, hay muchas formas de hacerlo, pero no se entiende bien el contexto de tu pregunta, editala. Commented el 22 jun. 2022 a las 21:06

3 respuestas 3

1

Puedes hacerlo de esta manera

<div>
    <span class="input-group-btn">
        <button class="btn btn-default btn-restar" id="menos1" value=1 type="button">-</button>
    </span>
    
    <input type="text" id="contador1" class="contador" value="1" min="1"/>
    
    <span class="input-group-btn">
        <button class="btn btn-default btn-sumar" id="mas1" value=1 type="button">+</button>
    </span>
</div>
<div>
    <span class="input-group-btn">
        <button class="btn btn-default btn-restar" id="menos2" value=1 type="button">-</button>
    </span>
    
    <input type="text" id="contador2" class="contador" value="1" min="1"/>
    
    <span class="input-group-btn">
        <button class="btn btn-default btn-sumar" id="mas2" value=1 type="button">+</button>
    </span>
</div>
<div>
    <span class="input-group-btn">
        <button class="btn btn-default btn-restar" id="menos3" value=1 type="button">-</button>
    </span>
    
    <input type="text" id="contador3" class="contador" value="1" min="1"/>
    
    <span class="input-group-btn">
        <button class="btn btn-default btn-sumar" id="mas3" value=1 type="button">+</button>
    </span>
</div>

Y el código JS

    var elemSumar = document.getElementsByClassName("btn-sumar");
    var elemRestar = document.getElementsByClassName("btn-restar");
    var elemContador = document.getElementsByClassName("contador");

    for(let i =0; i<elemSumar.length; i++){
        elemSumar[i].addEventListener("click", ()=>sumar(elemContador[i], elemSumar[i].value));
        elemRestar[i].addEventListener("click", ()=>restar(elemContador[i], elemRestar[i].value))
    }

    function sumar(contador, value) {
        contador.value = Number(contador.value) + Number(value);
    };

    function restar(contador, value) {
        contador.value = Number(contador.value) - Number(value);
    };

Así solo hay que añadirle una clase para diferenciar los botones de restar de los de sumar y los contadores. Añadirle un value al botón para que sume ese valor (por si quieres añadir botones de sumar mas cantidad no hay que modificar el script) y despues añadire los listeners para los botones

1

Hola yo usaria jquery para facilitar mas las cosas.

Primero cambiaria unas cosas en tu estructura de html, quitando los id por name y metiendo todo en un div.

    <div>
            <span class="input-group-btn">
              <button class="btn btn-default" name="menos" type="button">-</button>
            </span>
    
            <input type="text" name="contador" value="1" min="1"/>
    
            <span class="input-group-btn">
              <button class="btn btn-default" name="mas" type="button">+</button>
            </span>
</div>

Luego agregaría los eventos de más y menos

$("html").on("click", "button[name='menos']", function(){
        let numero = Number.parseInt($(this).parent().parent().find("input[name='contador']").val());
        $(this).parent().parent().find("input[name='contador']").val(numero - 1);
    });

    $("html").on("click", "button[name='mas']", function(){
        let numero = Number.parseInt($(this).parent().parent().find("input[name='contador']").val());
        $(this).parent().parent().find("input[name='contador']").val(numero + 1);
    });

$("html").on("click", "button[name='menos']", function(){
        let numero = Number.parseInt($(this).parent().parent().find("input[name='contador']").val());
        $(this).parent().parent().find("input[name='contador']").val(numero - 1);
    });

    $("html").on("click", "button[name='mas']", function(){
        let numero = Number.parseInt($(this).parent().parent().find("input[name='contador']").val());
        $(this).parent().parent().find("input[name='contador']").val(numero + 1);
    });

    $("#Agregar").on("click", function(){

        $("#contenedor").append(`
        <div>
        <span class="input-group-btn">
          <button class="btn btn-default" name="menos" type="button">-</button>
        </span>

        <input type="text" name="contador" value="1" min="1"/>

        <span class="input-group-btn">
          <button class="btn btn-default" name="mas" type="button">+</button>
        </span>
        </div>`);
    });
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>

    <button type="button" id="Agregar">Agregar</button>
    <div id="contenedor">
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

0

La lógica está bien, solo te faltaria enviar con parentElement

Javascript

document.addEventListener('click', e => {
    if (e.target.classList.contains('sumar')) {
        sumar(e.target.parentElement);//esto enviara el codigo html puro a js
    }
    if (e.target.classList.contains('restar')) {
        restar(e.target.parentElement);//esto enviara el codigo html puro a js
    }
}

HTML

<span class="input-group-btn">
  <button class="btn btn-default restar" id="menos" type="button">-</button>
</span>
<span class="input-group-btn">
  <button class="btn btn-default sumar" id="mas" type="button">+</button>
</span>

Script

function sumar(element){
  var contador = document.getElementById("contador");
  contador.value = Number(contador.value) + 1
}
function sumar(element){
   var contador = document.getElementById("contador");
   contador.value = Number(contador.value) - 1
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.