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;
}