CODEWITHSUNDEEP
javascriptdom-traversal
Matthew Abebe
Matthew Abebe

Reputation: 21

How can I select a dynamically created button?

I want to select a button from a list item that I created using the previous function in the script. It is showing its class name when I inspect the elements but when I console the element itself it is undefined. How can I select this element so as to attach an event listener to it? Thanks for your help!

var journalListEl = document.querySelector("#journal-list")
var journalTextInputEl = document.querySelector("#journal-text");
var journalEntryImageURLEl = document.querySelector("#journal-image-url")
var journalImage = document.querySelector("#journal-image")
var journalEntrySubmitButton = document.querySelector("#journal-entry-submit-button")

journalEntryImageURLEl.addEventListener("input", displayJournalPhoto)

function displayJournalPhoto() {
  var journalEntryImageURL = journalEntryImageURLEl.value
  journalImage.setAttribute("src", journalEntryImageURL)
}

journalEntrySubmitButton.addEventListener("click", handleSubmitJournalEntry)

function handleSubmitJournalEntry() {
  event.preventDefault()

  var journalEntryListItemEl = document.createElement("li")
  var journalEntryTextEl = document.createElement("p")
  var journalEntryImageEl = document.createElement("img")
  var journalEntryUpdateButton = document.createElement("button")
  var journalEntryDeleteButton = document.createElement("button")

  journalEntryUpdateButton.textContent = "Edit";
  journalEntryDeleteButton.textContent = "Delete";

  journalEntryListItemEl.classList.add("journal-list-entry")
  journalEntryUpdateButton.classList.add("edit-journal-entry")
  journalEntryDeleteButton.classList.add("delete-journal-entry")

  journalEntryTextEl.innerHTML = journalTextInputEl.value
  var journalEntryImageURL = journalEntryImageURLEl.value
  journalEntryImageEl.setAttribute("src", journalEntryImageURL)

  var newJournalEntryObj = {
    journalText: journalEntryTextEl,
    journalImage: journalEntryImageEl,
    journalImageURL: journalEntryImageURL
  }

  journalEntryListItemEl.appendChild(newJournalEntryObj.journalText)
  journalEntryListItemEl.appendChild(newJournalEntryObj.journalImage)
  journalEntryListItemEl.appendChild(journalEntryUpdateButton)
  journalEntryListItemEl.appendChild(journalEntryDeleteButton)
  journalListEl.appendChild(journalEntryListItemEl)
}

var updateJournalEntryButton = document.querySelector(".journal-list-entry")

updateJournalEntryButton.addEventListener("click", handleUpdateJournalEntry)

function handleUpdateJournalEntry() {

  alert("updated journal entry!")
}

Upvotes: 1

Views: 143

Answers (1)

Unmitigated
Unmitigated

Reputation: 89462

Use event delegation on the nearest static ancestor.

For example:

journalListEl.addEventListener('click', e => {
    if (e.target.matches('.journal-list-entry')) {
        // handle update journal entry
    }
});

Upvotes: 1

Related Questions