0

Mi código lo que hace es que al dar click a un botón dentro de un div, me crea ese mismo div dentro de otro div con otros botones, esto lo hago con template. Estos nuevos div tienen unos botones de + y - que incrementan o decrementan una cantidad. Cuando intento saber a qué div pertenece el botón + o - que presioné me da un problema. Si presiono por ejemplo el botón - me detecta un click por la cantidad de divs que se crearon igual a ese, entonces si anteriormente cree 5 div y doy click al botón - del primero, cuando lanzo una alerta de prueba para saber que si reconoce el botón, me la lanza 5 veces. Esto sucede si tengo la función que detecta a que boton di click dentro de donde creo los divs que los contienen, si pongo la función fuera no me reconoce que hago click.

Asi es como lo he intentado.

Codigo HTML

 <div class="divform">
                            <form action="" method="post" id="formordendetalle">
                               <template id="templatedetalle">
                                <div class='divdetalleorden'>
                                        <img style='width: 110px; height: 100px; ' src='$foto' alt='' id="fotodetalle">
                                        <span class='nameplatomostrar' id="nombredatalle">Nombre del plato</span>
                                        <div class='cantidad'>
                                            <span class='spancantidad'>Cantidad</span>
                                            <button  style='font-size: 14px;' type='button' class='btn btn-primary btnmenos' id='btnmenos'>-</button>
                                            <input style='width: 40px; text-align: center;' type='text' id='spanncantidad' value='2' class='ncantidad'></input>
                                            <button  style='font-size: 14px; margin-right:30px;' type='button' class='btn btn-primary btnmas' id='btnmas'>+</button>
                                            <button style='font-size: 14px;' class='btn btn-danger btneliminartra' id='btneliminartra' type='button'><svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='currentColor' class='bi bi-trash3' viewBox='0 0 16 16'>
                                            <path d='M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z'/>
                                            </svg></button>
                                        </div>
                                    </div>

                               </template>

                            </form>
                        </div>

Codigo JavaScript

//agregar consumible a detalle orden
const btns = document.querySelectorAll('#btnagrdetalle');
btns.forEach((btn) => {
  btn.addEventListener('click', e => {
    let btne = e.target;
    let div = btne.closest('.divplato');
    let nombre = div.querySelector('#nombre').innerText;
    let foto = div.querySelector('#foto');
    let srcfoto = foto.src;

    if(document.getElementById(nombre)){
      alert("Este plato ya fue agregado a la lista, si desea agregar mas, cambie la cantidad.");
    }
    else{
      //obtiene template
      let template = templatedetalle.content.cloneNode(true);
      let nombredetalle = template.querySelector('#nombredatalle');
      let fotodetalle = template.querySelector('#fotodetalle');
      let divdeta = template.querySelector('.divdetalleorden');
      

      nombredetalle.innerHTML = nombre;
      fotodetalle.src = srcfoto;
      divdeta.setAttribute("id", nombre);
      formordendetalle.appendChild(template);

      
    }

    if(document.getElementsByClassName('.divdetalleorden')){
      const cantmenos =document.querySelectorAll('#btnmenos');
      cantmenos.forEach((cnmenos) => {
        cnmenos.addEventListener('click', e => {
          alert('Hola');
      
        });
      });
    }
    

  });
});
2
  • intenta usar .html para crear divs en el div principal, ya que con .append vas a agregar todo el tiempo y lo anterior sigue estando. Commented el 13 nov. 2022 a las 16:26
  • Tienes algún ejemplo? por favor
    – Cruzhenko
    Commented el 13 nov. 2022 a las 16:34

1 respuesta 1

0
  1. Tienes Id's repetidos por todos lados, los Id's deben ser únicos. Y si vas a crear varios elementos a partir de un template, los elementos de este templante no deben tener Id.

Y recalco los Id no deben estar repetidos Causa número 1 de bugs evitables

Esto no tiene ningún sentido: const btns = document.querySelectorAll('#btnagrdetalle');

  1. El bendito addEventListener, desde hace unos años se volvió moda usar esa función para atachar un evento por sobre ocupar el atributo onclick. Muchas guías y tutoriales solo ocupan este método. Pero es como aprender a volar antes de aprender a caminar.

Voy a tratar de reproducir tu problema con el siguiente código.

Debes presionar el boton0 3 veces y ver que pasa:

let suma=0;
function agregar(){
  let b=document.createElement("button");
  b.innerText="Boton" + suma;
  b.classList.add("btn");
  contenedor.append(b);
  
  document.querySelectorAll("button").forEach(e =>{
    e.addEventListener("click", function(){
    suma++;
    agregar();
    });
  });
}
agregar();
<div id="contenedor"></div>

Si presionaste varias veces el boton0 te habrás dado cuenta que en vez de agregar 1 botón empieza a agregar muchos, esto es porque el addEventListener agrega eventos no reemplaza el existente.

Esta característica es buena, pero solo cuando lo necesitamos, lo cual ocurre casi nunca. Por eso, si tu estas empezando, te recomiendo usar el atributo onclick

Ejemplo:

function agregar() {
    if (buscarSiExsite(nombrePlato.value)){
        alert("Este plato ya fue agregado a la lista, si desea agregar mas, cambie la cantidad.");
        return;
    }

    let template = templatedetalle.content.cloneNode(true);
    let nombredetalle = template.querySelector('.nameplatomostrar');
    let fotodetalle = template.querySelector('.fotodetalle');
    let cant = template.querySelector('.ncantidad');

    nombredetalle.innerHTML = nombrePlato.value;
    // fotodetalle.src ni idea lo que va aca
    cant.value = 1;
    ListaPlatos.appendChild(template);

}


function buscarSiExsite(nombrePlato) {
    let listaNombres = ListaPlatos.querySelectorAll(".nameplatomostrar");
    for(let e of listaNombres){
        if (e.innerHTML == nombrePlato) {
            return true;
        }
    }
    return false;
}

function sumar(elem, val) {
    let cant = elem.parentNode.querySelector('.ncantidad');
    cant.value = Number(cant.value) + val;
}

function eliminar(elem) {
    elem.parentNode.parentNode.remove();
}
 <div class="divform">
    <form action="" method="post" id="formordendetalle">
        <input type="text" id="nombrePlato" />
        <button type="button" onclick="agregar()">Agregar</button>

    </form>
     <div id="ListaPlatos"></div>
     <template id="templatedetalle">
        <div class='divdetalleorden'>
                <img style='width: 110px; height: 100px; ' src='$foto' alt='' class="fotodetalle">
                <span class='nameplatomostrar'></span>
                <div class='cantidad'>
                    <span class='spancantidad'>Cantidad</span>
                    <button  style='font-size: 14px;' type='button' class='btn btn-primary btnmenos' onclick="sumar(this,-1)">-</button>
                    <input style='width: 40px; text-align: center;' type='text' value='1' class='ncantidad' />
                    <button  style='font-size: 14px; margin-right:30px;' type='button' class='btn btn-primary btnmas' onclick="sumar(this,1)">+</button>
                    <button style='font-size: 14px;' class='btn btn-danger btneliminartra' type='button'  onclick="eliminar(this)"><svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='currentColor' class='bi bi-trash3' viewBox='0 0 16 16'>
                    <path d='M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z'/>
                    </svg></button>
                </div>
            </div>

        </template>
</div>

1
  • Muchísimas gracias por los consejos, me sirvió mucho tu respuesta. logré solucionarlo.
    – Cruzhenko
    Commented el 13 nov. 2022 a las 18:17

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.