Al usar Django, mis botones se crean usando un bucle for y se les asignan valores basados en los valores del modelo.
Según el botón en el que se haga clic, quiero actualizar "new_note_header" con el código HTML interno del botón.
Creé el siguiente JavaScript, que funciona pero solo cuando se hace clic en el primer botón.
<script> function ProjectSelect () { var x = document.querySelector('button').innerHTML; document.getElementById('new_note_header').innerHTML = x; } document.addEventListener('DOMContentLoaded', function () { document.querySelector('button').onclick = ProjectSelect; }); </script> <div class = project_container> {% for project in projects %} <button class = individual_project_container> {{ project }} </button> {% endfor %} </div> <div class = note_header_container> <div class = new_note_header, id = new_note_header> New Note </div> </div>Agradecería cualquier ayuda para adaptar el JavaScript para que funcione para todos los botones en los que se hace clic.
Muchas gracias
querySelector tomará el PRIMER elemento que satisfaga el selector
Puede usar querySelectorAll y asignar un controlador de eventos de clic a cada uno, pero recomiendo usar la delegación:
document.addEventListener('DOMContentLoaded', function() { const nnHead = document.getElementById('new_note_header'); document.getElementById("project_container").addEventListener("click", e => { const tgt = e.target.closest("button"); if (!tgt.matches(".individual_project_container")) return; // not a button nnHead.textContent = tgt.textContent.trim(); }); }); <div class="project_container" id="project_container"> <button class="individual_project_container">Project 1</button> <button class="individual_project_container">Project 2</button> <button class="individual_project_container">Project 3</button> </div> <div class="note_header_container"> <div class="new_note_header" id="new_note_header"> New Note </div> </div>