Estoy haciendo un calendario y un sitio web para hacer la lista. Entonces, básicamente agrego divs para cada bloque de horario. He usado este tutorial en yt ( https://youtu.be/MkESyVB4oUw ) para los bloques de horarios. (A las 24:03) Entonces, en HTML hay entradas en un formulario y él usa la constante "formulario" para ello y usa un envío addEventListener. He usado esto y todos mis bloques de horarios funcionan bien. Puedo agregar múltiples bloques y todo funciona bien.
Después de eso, hice una sección de cosas por hacer/objetivos y decidí tomar el "formulario" en mis propias manos. Así que lo hice:
// I tried const and var and the same thing happened const todoAdd = document.querySelector("#new-todo"); // This is the button const weekDiv = document.querySelector("#week-divs"); const todoDiv = document.createElement('div'); todoDiv.classList.add("todo-div");Esto es lo que hice para los bloques de tiempo y funcionó, y luego agregué:
todoAdd.onclick = function(){ weekDiv.appendChild(todoDiv); }Cuando lo hago así, el div se agrega una vez y eso es todo. Si sigo haciendo clic en el div, se reemplaza una y otra vez.
Me di cuenta de esto a mitad de escribirlo. Porque cuando addEventListener se inicia para el formulario, ahí es cuando hice todos los agregados. Entonces, la solución simple a esto fue simplemente agregar createElement dentro de la función.
todoAdd.onclick = function(){ const todoDiv = document.createElement('div'); todoDiv.classList.add("todo-div"); weekDiv.appendChild(todoDiv); }Probablemente podría haberme dado cuenta de esto antes si no estuviera tan confundido acerca de que en realidad funcionó solo una vez. Pensé que faltaba algo en lugar de un simple error. Supongo que solo se agrega una vez porque solo se lee una vez, mientras que en una función onclick o addEventListener siempre se repite y se vuelve a leer, ¿verdad? Esos son mis pensamientos. Espero que esto ayude a alguien tal vez.