We are trying to dynamically add tasks using the below javascript on click event. I ran into this problem with my code. I want to push the created objects into an array and then display in a bootstrap card.
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>I'd probably tweak your codes a bit become like this, to make it more dynamic and easier.
The problem in your snippet is, it failed to call addCard function when you click the <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>