Este es mi primer proyecto JS.
Estoy creando un programador de estudios en el que el usuario ingresa un elemento pendiente y lo asigna a un día.
JS crea los elementos necesarios (campo de entrada, botón de papelera, botón completado, botón de hora de inicio y botón de hora de finalización). Tengo un problema con el selector de tiempo.
Escribí una función que muestra un reloj (que escribí en html) cuando el usuario hace clic en un botón de inicio (que se crea en JS). Puede haber botones de inicio ilimitados, así que escribí un eventListener para la matriz de estos botones.
El usuario elige la hora, los minutos y am/pm, que se almacenan en variables, y luego, cuando hacen clic en setTimeButton, el startButton.innerText objetivo debe actualizarse para mostrar esta hora. La primera vez que ejecuto la función funciona. Después de eso, está cambiando el botón de inicio objetivo más cada botón de hora de inicio anterior en el que hice clic.
Aquí está el código:
document.addEventListener('DOMContentLoaded', () => Array.from(startButton).forEach(element => element.addEventListener('click', showTimePicker) ) ); function showTimePicker(e) { let startOrEndTimeButton = e.target // show clock Array.from(time).forEach(element => element.classList.toggle('hide')) // click setTimeButton to insert time into targeted start time or end time button setTimeButton.addEventListener('click', function() { startOrEndTimeButton.innerText = chosenHour.innerText + ':' + chosenMinutes.innerText + " " + chosenAmPm.innerText; startOrEndTimeButton.style.backgroundColor = '#39ff14'; startOrEndTimeButton.style.color = 'white'; Array.from(time).forEach(element => element.classList.toggle('hide')); }) }Aquí hay una versión simplificada de la lógica de su aplicación y el comportamiento problemático que describe:
Set , cambiará el valor de ese botón en particularSet , cambiará el valor del botón seleccionado y también el valor del botón seleccionado anteriormente . const setTimeButton = document.getElementById("set"); const startButton = document.querySelectorAll("button.st"); document.addEventListener( 'DOMContentLoaded', () => Array.from( startButton ) .forEach( element => element.addEventListener( 'click', showTimePicker ) ) ); function showTimePicker( e ) { let startOrEndTimeButton = e.target setTimeButton.addEventListener( 'click', function () { console.log("event handler changing:", startOrEndTimeButton); startOrEndTimeButton.innerText = (Math.random() * 1000).toFixed(); }) } <button class="st one">Start 1</button> <button class="st two">Start 2</button> <button class="st three">Start 3</button> <button id="set">Set</button>Estos son los cambios que debe realizar para que la aplicación funcione como se espera:
startOrEndTimeButton fuera de showTimePicker .setTimeoutButton fuera de showTimePicker . Como señaló correctamente Mister Jojo , no desea configurar un Event Listener en setTimeoutButton cada vez que hace clic en un startButton .
Puede ejecutar los fragmentos de código en estos dos ejemplos y verificar el comportamiento resultante usted mismo. Estudie el código detenidamente para comprender por qué los cambios sugeridos afectan el comportamiento del programa y deje un comentario en caso de que tenga alguna pregunta sobre los cambios sugeridos.
const setTimeButton = document.getElementById("set"); const startButton = document.querySelectorAll("button.st"); document.addEventListener( 'DOMContentLoaded', () => Array.from( startButton ) .forEach( element => element.addEventListener( 'click', showTimePicker ) ) ); let startOrEndTimeButton; function showTimePicker( e ) { startOrEndTimeButton = e.target } setTimeButton.addEventListener( 'click', function () { startOrEndTimeButton.innerText = (Math.random() * 1000).toFixed(); }) <button class="st">Start 1</button> <button class="st">Start 2</button> <button class="st">Start 3</button> <button id="set">Set</button>