为什么这个组件创建者返回未定义？

Question

import axios from "axios"

 const Card = (article) => {
  let cardWrap = document.createElement('div')
  let headDiv = document.createElement('div')
  let authorDiv = document.createElement('div')
  let picWrap = document.createElement('div')
  let imgAuthor = document.createElement('img')
  let authorSpan = document.createElement('span')

  cardWrap.classList.add('card')
  headDiv.classList.add('headline')
  authorDiv.classList.add('author')
  picWrap.classList.add('img-container')

  cardWrap.appendChild(headDiv)
  cardWrap.appendChild(authorDiv)
  authorDiv.appendChild(picWrap)
  picWrap.appendChild(imgAuthor)
  authorDiv.appendChild(authorSpan)

  headDiv.textContent = (article.headline)
  imgAuthor.src = (article.authorPhoto)
  authorSpan.textContent = (article.authorName)

  cardWrap.addEventListener(('click'), e => {
    console.log(article.headline)

  return cardWrap
  })


const cardAppender = (selector) => {
  axios.get('https://lambda-times-api.herokuapp.com/articles')
      .then((articleData) => {
        console.log(articleData.data.articles.javascript)
        articleData.data.articles.javascript.forEach(articleNew => {
          console.log(articleNew)
          let newCard = Card(articleNew);
          console.log(newCard)
        });
      })
      .catch((err) => {
        console.log(err)
      })

this is the console log for articleNew

{id: "1e4d8724-5973-4b5b-84d9-a30a3c5adb70", headline: "ES8: The Next Step in the Evolution of Javascript and What it Means For Your Projects", authorPhoto: "https://tk-assets.lambdaschool.com/08d1372e-e393-47f1-ac44-fcb7d0baf0e2_sir.jpg", authorName: "SIR RUFF'N'STUFF"}

{id: "553e2401-c95d-4029-89b8-fc6bdb60ae5e", headline: "Type Coercion: Why Does NaN?== NaN, and Other Strange Occurrences": authorPhoto: "https.//tk-assets.lambdaschool.com/a9471235-ed71-4b11-ae15-5a4fa1151d30_bones,jpg": authorName. "BONES R. LIFE"}

{id: "9c2ed89e-7150-4cd6-a5c2-4a4f3d6932c8", headline: "When to Rest, When to Spread: Why There Are Two Meanings Behind '...'", authorPhoto: "https://tk-assets.lambdaschool.com/44260ce3-c8f0-4db8-bc1d-9877662fdf96_puppers.jpg", authorName: "PUPPER S. DOGGO"}

{id: "b3af02ec-5733-4a14-8876-5db708d20051", headline: "Typescript: Ten Things you Should Know Before Building Your Next Angular Application", authorPhoto: "https://tk-assets.lambdaschool.com/08d1372e-e393-47f1-ac44-fcb7d0baf0e2_sir.jpg", authorName: "SIR RUFF'N'STUFF"}

I dont understand why newCard is logging undefined?

Answer 1

cardWrap.addEventListener(('click'), e => {
    console.log(article.headline)

  return cardWrap // <== this should be outside the event listener
  })

Your return is inside addEventListener.