1

Contexto: Estoy haciendo un cronometro, el mismo permite registrar tiempos pero al implementar que el usuario pueda eliminar los tiempos que ya no quiera en la lista me encontré con un problema.

Problema: Cada vez que selecciono un registro para eliminarlo, me pide X numero de veces confirmación de eliminación donde X es igual al orden en que fue agregado. Es decir, si fue el primer tiempo guardado me pide una confirmación, para el segundo dos y así sucesivamente.

Intente:

  • llamar a una función auto invocada así como crear la función independiente y luego llamarla.
  • Declarar la variable fuera del cilo y luego asignarla dentro, así como hacerlo todo en el mismo for.
  • También intente hacerlo funcionar de maneras diferentes pero siendo dinámico esta me parece la mejor manera de hacerlo.

NOTA: Supongo que el error esta entre la linea 83 y 95.

Adjunto el codigo js, html y css.

Java Script:

document.addEventListener("DOMContentLoaded", (event) => {

    let min = document.getElementById('min');
    let seg = document.getElementById('seg');
    let miSeg = document.getElementById('miSeg');

    let contMin = 0;
    let contSeg = 0;
    let contMiSeg = 0;

    //Control
    let btnIniciar = document.getElementById('btnIniciar');
    let btnDetener = document.getElementById('btnDetener');
    let btnReset = document.getElementById('btnReset');
    let btnGuardar = document.getElementById('btnGuardar');
    let btnOcultarVtn = document.getElementById('btnOcultarVtn');

    let timing;

    btnIniciar.addEventListener( 'click', function(){
        clearInterval(timing);
        timing = setInterval(() => {
            contMiSeg++
            miSeg.textContent= contMiSeg.toString().padStart( 2 , '0' );
            if(contMiSeg == 99){
                contMiSeg = 0,
                miSeg.textContent= contMiSeg.toString().padStart( 2 , '0' );
                contSeg++;
                seg.textContent= contSeg.toString().padStart( 2 , '0' );
            }
    
            if(contSeg == 60){
                contSeg = 0;
                seg.textContent= contSeg.toString().padStart( 2 , '0' );
                contMin++;
                min.textContent= contMin.toString().padStart( 2 , '0' );
            }
        }, 10);
    });
    
    btnReset.addEventListener( 'click', function(){
        contMiSeg = 0;
        contSeg = 0;
        contMin = 0;
        miSeg.textContent = contMiSeg.toString().padStart( 2, '0');
        seg.textContent = contSeg.toString().padStart( 2, '0');
        min.textContent = contMin.toString().padStart( 2, '0');
    });

    btnDetener.addEventListener( 'click', function(){
        clearInterval(timing);
    });

    btnGuardar.addEventListener( 'click', function(){
        let tiempo = [contMin.toString().padStart( 2, '0'), contSeg.toString().padStart( 2, '0'), contMiSeg.toString().padStart( 2, '0')];
        let tiempoFormateado = tiempo.join(' : ');
        let contadorTiempos = 0;    

        let divElement = document.createElement('div');
        divElement.className = 'registro';
        let nodoTiempo = document.createTextNode(tiempoFormateado);

        let fecha = new Date();
        let opcionesFecha = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
        let opcionesHora = { hour: 'numeric', minute: 'numeric', second: 'numeric' };
        let formatoFecha = new Intl.DateTimeFormat('es', opcionesFecha).format(fecha);
        let formatoHora = new Intl.DateTimeFormat('es', opcionesHora).format(fecha);
        let regFechaCompleta = formatoFecha + ' ' + formatoHora;
        let nodoFecha = document.createTextNode(regFechaCompleta);

        let parr1 = document.createElement('p');
        parr1.className = 'registro--fecha'
        let parr2 = document.createElement('p');
        parr2.className = 'registro--tiempo'

        let registros = document.getElementById('registros');
        registros.appendChild(divElement);
        divElement.appendChild(parr1);
        divElement.appendChild(parr2);
        parr1.appendChild(nodoFecha);
        parr2.appendChild(nodoTiempo);
        
        function eliminar(){
            let confirmacion = confirm('¿Seguro que deseas eliminar este registro?');
            if( confirmacion === true ){
                this.remove();
            }
        }

        let registro = document.getElementsByClassName('registro');
        
        for( let i = 0; i < registro.length; i++ ){
            registro[i].addEventListener( 'click', eliminar );     
        }
    });

    btnTiempos.addEventListener( 'click', function(){
        let ventanaTiempos = document.getElementById('ventanaTiempos');
        ventanaTiempos.style.width = "200px";
    })

    btnOcultarVtn.addEventListener( 'click', function(){
        ventanaTiempos.style.width = '0px';
    })

});

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRONOS</title>
    <link rel="stylesheet" href="styles/style.css">
    <script src="scripts/script.js"></script>
</head>

<body>

    <h1><span class="js">JS</span><span class="cronos">CRONOS</span><span class="version">v0.1.3</span></h1>

    <div class="container">
        <div class="controles">
            <button id="btnIniciar" class="btn--ctrl">Iniciar</button>
            <button id="btnDetener" class="btn--ctrl">Detener</button>
            <button id="btnReset" class="btn--ctrl">Resetear</button>
            <button id="btnGuardar" class="btn--ctrl">Guardar</button>
        </div>

        <div class="cronometro">
            <div class="contChild"><span class="contador" id="min">00</span></div>
            <div><span class="separador"> : </span></div>
            <div class="contChild"><span class="contador" id="seg">00</span></div>
            <div><span class="separador"> . </span></div>
            <div class="contChild"><span class="contador" id="miSeg">00</span></div>
        </div>

        <div class="tiempos">
            <button id="btnTiempos" class="btn--ctrl">Tiempos</button>
        </div>
    </div>    

    <p class="atribucion">Foto de <a href="https://unsplash.com/@bradencollum?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Braden Collum</a> en <a href="https://unsplash.com/es/fotos/9HI8UJMSdZA?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></p>

    <div class="ventana--tiempos" id="ventanaTiempos">
        <h2 class="tiempos--header" id="btnOcultarVtn">Tiempos</h2>
        <div id="registros" class="contenedor--registros"></div>   <!-- Los registros se generaran dinamicamente con js -->
    </div>

</body>
</html>

CSS:

/* RESET BASICO */
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* TAGS */
body{
    font-family: sans-serif;
    background-image: url(../images/fondo1.jpg);
    background-size: cover;
    overflow: hidden;
}

.cronos{
    padding: 0px 10px;
    background-color: black;
    color: rgb(255, 238, 0);
    font-weight: lighter;
}

/* CLASES */
.js{
    font-size: 18px;
    padding: 12px 2px 3px 12px;
    background-color: rgb(255, 238, 0);
}

.version{
    margin-left: 3px;
    font-size: 14px;
    font-style: italic ;
}

.container{
    display: flex;
    justify-content: space-between;
    margin-top: 100px;
    background-color: black;
    opacity: .9;
}

.controles{
    display: flex;
    flex-direction: column;

}

.btn--ctrl{
    display: flex;
    font-size: 18px;
    padding: 20px;
    background-color: yellow;
    color: black;
}

.no--implementado{
    opacity: .3;
}

.cronometro{
    display: flex;
    justify-content: end;
    /* margin-right: 150px; */
}

.contChild{
    text-align: end;
    min-width: 260px;
    border: solid 14px;
    border-radius: 20px;
}

.contador{
    font-size: 200px;
    color: rgb(255, 238, 0);;
}

.separador{
    font-size: 200px;
    color: gray;
}

.atribucion{
    font-size: 14px;
    color:rgb(255, 238, 0);
    font-style: italic;
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: #050505;
    padding: 10px;
}

.atribucion a{
    background-color: rgb(255, 238, 0);
    color: black;
    padding: 1px 10px;
}

.ventana--tiempos{
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: rgb(255, 238, 0);;
    border-left: black solid 5px;
    height: 100vh;
    width: 0px;
    overflow: auto;
    z-index: 10;
    transition: .5s;
}

.tiempos--header{
    text-align: center;
    padding: 10px;
    background-color: black;
    color:rgb(255, 238, 0);
}

.registro{
    border-bottom: black solid;
    padding: 5px 0;
}

.registro--fecha{
    text-align: center;
    font-size: 9px;
    font-style: italic
}

.registro--tiempo{
    text-align: center;
    font-size: 25px;
    font-weight: bold;
}
1
  • 2
    Agrega tu HTML también así los que quieren ayudarte pueden replicar tu error mas fácilmente Commented el 25 jun. 2023 a las 20:45

1 respuesta 1

1

Problema:

El error ocurre aquí:

btnGuardar.addEventListener( 'click', function() {
  //...
  function eliminar(){
    let confirmacion = confirm('¿Seguro que deseas eliminar este registro?');
    if( confirmacion === true ){
      this.remove();
    }
  }

  let registro = document.getElementsByClassName('registro');

  for( let i = 0; i < registro.length; i++ ){
    registro[i].addEventListener( 'click', eliminar );     
  }
})

Sucede que cada vez que guardas un nuevo registro (los tiempos), asignas nuevamente los eventos de eliminación a todos los elementos registro, incluidos los que ya tenías anteriormente, y como resultado, se están acumulando múltiples eventos de eliminación en los elementos existentes, lo que provoca que se muestre la alerta múltiples veces, es decir, si seleccionas el segundo registro, muestra la alerta 2 veces (por ser el segundo seleccionado), si seleccionas el tercer registro, muestra la alerta 3 veces, sucesivamente.


Solución:

La solución sería asignar el evento a cada uno de los registros mientras se van agregando, obteniendo el último elemento que fue coleccionado en la variable registro.

let registro = document.getElementsByClassName('registro');
let nuevoRegistro = registro[registro.length - 1];

nuevoRegistro.addEventListener('click', eliminar);

Aquí el proceso sería que al agregar un registro, se almacena en la variable registro, y al colocar registro[registro.length - 1], obtenemos ese último registro que se almacenó y le asignamos el evento click, continuamente así para los siguientes registros que se almacenen, para que la función eliminar remueva al registro quien se hizo clic correspondiente, llamando sólo 1 vez al evento click y no repetidas veces.


Código:

document.addEventListener("DOMContentLoaded", (event) => {

  let min = document.getElementById('min');
  let seg = document.getElementById('seg');
  let miSeg = document.getElementById('miSeg');

  let contMin = 0;
  let contSeg = 0;
  let contMiSeg = 0;

  //Control
  let btnIniciar = document.getElementById('btnIniciar');
  let btnDetener = document.getElementById('btnDetener');
  let btnReset = document.getElementById('btnReset');
  let btnGuardar = document.getElementById('btnGuardar');
  let btnOcultarVtn = document.getElementById('btnOcultarVtn');

  let timing;

  btnIniciar.addEventListener( 'click', function(){
    clearInterval(timing);
    timing = setInterval(() => {
      contMiSeg++
      miSeg.textContent= contMiSeg.toString().padStart( 2 , '0' );
      if(contMiSeg == 99){
        contMiSeg = 0,
          miSeg.textContent= contMiSeg.toString().padStart( 2 , '0' );
        contSeg++;
        seg.textContent= contSeg.toString().padStart( 2 , '0' );
      }

      if(contSeg == 60){
        contSeg = 0;
        seg.textContent= contSeg.toString().padStart( 2 , '0' );
        contMin++;
        min.textContent= contMin.toString().padStart( 2 , '0' );
      }
    }, 10);
  });

  btnReset.addEventListener( 'click', function(){
    contMiSeg = 0;
    contSeg = 0;
    contMin = 0;
    miSeg.textContent = contMiSeg.toString().padStart( 2, '0');
    seg.textContent = contSeg.toString().padStart( 2, '0');
    min.textContent = contMin.toString().padStart( 2, '0');
  });

  btnDetener.addEventListener( 'click', function(){
    clearInterval(timing);
  });

  btnGuardar.addEventListener( 'click', function(){
    let tiempo = [contMin.toString().padStart( 2, '0'), contSeg.toString().padStart( 2, '0'), contMiSeg.toString().padStart( 2, '0')];
    let tiempoFormateado = tiempo.join(' : ');
    let contadorTiempos = 0;    

    let divElement = document.createElement('div');
    divElement.className = 'registro';
    let nodoTiempo = document.createTextNode(tiempoFormateado);

    let fecha = new Date();
    let opcionesFecha = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
    let opcionesHora = { hour: 'numeric', minute: 'numeric', second: 'numeric' };
    let formatoFecha = new Intl.DateTimeFormat('es', opcionesFecha).format(fecha);
    let formatoHora = new Intl.DateTimeFormat('es', opcionesHora).format(fecha);
    let regFechaCompleta = formatoFecha + ' ' + formatoHora;
    let nodoFecha = document.createTextNode(regFechaCompleta);

    let parr1 = document.createElement('p');
    parr1.className = 'registro--fecha'
    let parr2 = document.createElement('p');
    parr2.className = 'registro--tiempo'

    let registros = document.getElementById('registros');
    registros.appendChild(divElement);
    divElement.appendChild(parr1);
    divElement.appendChild(parr2);
    parr1.appendChild(nodoFecha);
    parr2.appendChild(nodoTiempo);

    function eliminar(){
      let confirmacion = confirm('¿Seguro que deseas eliminar este registro?');
      if( confirmacion === true ){
        this.remove();
      }
    }

    let registro = document.getElementsByClassName('registro');
    let nuevoRegistro = registro[registro.length - 1];
    nuevoRegistro.addEventListener('click', eliminar);
  });

  btnTiempos.addEventListener( 'click', function(){
    let ventanaTiempos = document.getElementById('ventanaTiempos');
    ventanaTiempos.style.width = "200px";
  })

  btnOcultarVtn.addEventListener( 'click', function(){
    ventanaTiempos.style.width = '0px';
  })

});
/* RESET BASICO */
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* TAGS */
body{
  font-family: sans-serif;
  background-image: url(../images/fondo1.jpg);
  background-size: cover;
  overflow: hidden;
}

.cronos{
  padding: 0px 10px;
  background-color: black;
  color: rgb(255, 238, 0);
  font-weight: lighter;
}

/* CLASES */
.js{
  font-size: 18px;
  padding: 12px 2px 3px 12px;
  background-color: rgb(255, 238, 0);
}

.version{
  margin-left: 3px;
  font-size: 14px;
  font-style: italic ;
}

.container{
  display: flex;
  justify-content: space-between;
  margin-top: 100px;
  background-color: black;
  opacity: .9;
}

.controles{
  display: flex;
  flex-direction: column;

}

.btn--ctrl{
  display: flex;
  font-size: 18px;
  padding: 20px;
  background-color: yellow;
  color: black;
}

.no--implementado{
  opacity: .3;
}

.cronometro{
  display: flex;
  justify-content: end;
  /* margin-right: 150px; */
}

.contChild{
  text-align: end;
  min-width: 260px;
  border: solid 14px;
  border-radius: 20px;
}

.contador{
  font-size: 200px;
  color: rgb(255, 238, 0);;
}

.separador{
  font-size: 200px;
  color: gray;
}

.atribucion{
  font-size: 14px;
  color:rgb(255, 238, 0);
  font-style: italic;
  position: fixed;
  bottom: 0;
  right: 0;
  background-color: #050505;
  padding: 10px;
}

.atribucion a{
  background-color: rgb(255, 238, 0);
  color: black;
  padding: 1px 10px;
}

.ventana--tiempos{
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: rgb(255, 238, 0);;
  border-left: black solid 5px;
  height: 100vh;
  width: 0px;
  overflow: auto;
  z-index: 10;
  transition: .5s;
}

.tiempos--header{
  text-align: center;
  padding: 10px;
  background-color: black;
  color:rgb(255, 238, 0);
}

.registro{
  border-bottom: black solid;
  padding: 5px 0;
}

.registro--fecha{
  text-align: center;
  font-size: 9px;
  font-style: italic
}

.registro--tiempo{
  text-align: center;
  font-size: 25px;
  font-weight: bold;
}
<h1><span class="js">JS</span><span class="cronos">CRONOS</span><span class="version">v0.1.3</span></h1>

<div class="container">
  <div class="controles">
    <button id="btnIniciar" class="btn--ctrl">Iniciar</button>
    <button id="btnDetener" class="btn--ctrl">Detener</button>
    <button id="btnReset" class="btn--ctrl">Resetear</button>
    <button id="btnGuardar" class="btn--ctrl">Guardar</button>
  </div>

  <div class="cronometro">
    <div class="contChild"><span class="contador" id="min">00</span></div>
    <div><span class="separador"> : </span></div>
    <div class="contChild"><span class="contador" id="seg">00</span></div>
    <div><span class="separador"> . </span></div>
    <div class="contChild"><span class="contador" id="miSeg">00</span></div>
  </div>

  <div class="tiempos">
    <button id="btnTiempos" class="btn--ctrl">Tiempos</button>
  </div>
</div>    

<p class="atribucion">Foto de <a href="https://unsplash.com/@bradencollum?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Braden Collum</a> en <a href="https://unsplash.com/es/fotos/9HI8UJMSdZA?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></p>

<div class="ventana--tiempos" id="ventanaTiempos">
  <h2 class="tiempos--header" id="btnOcultarVtn">Tiempos</h2>
  <div id="registros" class="contenedor--registros"></div>   <!-- Los registros se generaran dinamicamente con js -->
</div>

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.