Estoy tratando de crear una aplicación de tareas de una sola página con javascript simple. Hay un botón en la página que toma el valor del texto del cuadro de texto y crea un botón con ese valor de entrada. Lo que estoy tratando de hacer es pasar el valor de texto de un botón, que el usuario crea dinámicamente, a otro elemento, un elemento h2, por ejemplo. Aquí hay capturas de pantalla para explicar lo que quiero decir;
Escriba un nombre de lista y haga clic en el botón Crear lista;
Se crea un botón con el valor de texto de entrada. Ahora, cuando hace clic en el botón Lista 1, el valor de texto de ese botón, "Lista 1", debe pasar al elemento h2 a la derecha;
Aquí está mi código hasta ahora;
<div class="container" id="table-and-list-names"> <div class="row"> <div class="col-3"> <ul class="nav flex-column" id="list-names"> <!--Names of Lists created by user will be here--> </ul> </div> <!--TABLE--> <div class="col-9"> <h2 id="current-list-name">Select Todo List</h2> //...Crear botón;
export function createButton(listName) { const listOfLists = document.querySelector('#list-names'); const newList = document.createElement('li'); const newListButton = document.createElement('button'); newListButton.classList.add("btn", "btn-sm", "btn-outline-primary", "created-list"); newListButton.innerText = listName; newList.appendChild(newListButton); listOfLists.appendChild(newList); }Traté de pasar el valor del texto con este código pero no funcionó;
const currListName = document.querySelector('#current-list-name'); var buttons = document.getElementsByClassName('.created-list'); var buttonCount = buttons.length; for (var i = 0; i <= length; ++i) buttons[i].onClick = function(e) { currListName.textContent = buttons[i].textContent; };No sucede nada cuando hago clic en el botón, no hay errores en la consola del navegador. Solo recibo un error cuando actualizo la página y dice "Error de tipo no detectado: no se puede acceder a la propiedad "onClick", los botones [i] no están definidos". Creo que es porque no hay ningún botón cuando actualizo la página. ¿Alguna sugerencia?
Entonces, ¿cómo se supone que este newListButton sabe lo que tiene que hacer? Tienes que decírselo, adjuntando un eventListener o creando un controlador onlick.