Estamos tratando de agregar tareas dinámicamente usando el siguiente javascript en el evento de clic. Me encontré con este problema con mi código. Quiero insertar los objetos creados en una matriz y luego mostrarlos en una tarjeta de arranque.
let button = document.getElementById('clickMe'); button.addEventListener('click', addCard({ 'name': 'juice' } )) function addCard(card) { const cardBody = `<div class="card" id="newCard"> <h5 class="card-header bg bg-warning">Task Card <span id="time" style = "padding-top:5px;"></span></h5> <div class="card-body"> <h5 class="card-title"></h5> <p class="card-text"><strong>${card.name}<br>Assigned to<br>Due date<br>Status<br>Description</strong></p> </div> <div class="card-footer"> <a href="#" class="btn btn-primary">Edit</a> <a href="#" class="btn btn-secondary">Delete</a> </div> </div> `; let cardList = document.getElementById('cardList') cardList.innerHTML += cardBody; } <form> <input type="text" id="nameF"> <span id="msgErr"></span> <br> <br> <input type="text" id="nameL"> <span id="msgErr"></span> <br> <br> <button type="button" id="clickMe">Validate</button> <span id="currentTime"></span> </form> <div class="container card-columns" id="cardList"> <div class="card" id="newCard"> <h5 class="card-header bg bg-warning">Task Card <span id="time" style="padding-top:5px;"></span></h5> <div class="card-body"> <h5 class="card-title"></h5> <p class="card-text"><strong>Name<br>Assigned to<br>Due date<br>Status<br>Description</strong></p> </div> <div class="card-footer"> <a href="#" class="btn btn-primary">Edit</a> <a href="#" class="btn btn-secondary">Delete</a> </div> </div>Probablemente ajustaría un poco sus códigos para que se vuelvan así, para hacerlo más dinámico y más fácil. El problema en su fragmento es que no pudo llamar a la función addCard cuando hace clic en <button> .
function addCard() { const card = { name: document.getElementById('nameF').value + ' ' + document.getElementById('nameL').value }; const cardBody = ` <div class="card" id="newCard"> <h5 class="card-header bg bg-warning">Task Card <span id="time" style = "padding-top:5px;"></span></h5> <div class="card-body"> <h5 class="card-title"></h5> <p class="card-text"> <strong> ${card.name} <br> Assigned to <br> Due date <br> Status <br> Description </strong> </p> </div> <div class="card-footer"> <a href="#" class="btn btn-primary">Edit</a> <a href="#" class="btn btn-secondary">Delete</a> </div> </div> `; const cardList = document.getElementById('cardList'); cardList.innerHTML += cardBody; } <form> <input type="text" id="nameF"> <span id="msgErr"></span> <br> <br> <input type="text" id="nameL"> <span id="msgErr"></span> <br> <br> <button type="button" id="clickMe" onclick="addCard()">Validate</button> <span id="currentTime"></span> </form> <div class="container card-columns" id="cardList"> <div class="card" id="newCard"> <h5 class="card-header bg bg-warning"> Task Card <span id="time" style="padding-top:5px;"></span> </h5> <div class="card-body"> <h5 class="card-title"></h5> <p class="card-text"> <strong> Name <br> Assigned to <br> Due date <br> Status <br> Description </strong> </p> </div> <div class="card-footer"> <a href="#" class="btn btn-primary">Edit</a> <a href="#" class="btn btn-secondary">Delete</a> </div> </div> </div>