How to pass an id of the item from the list to other function

Question

My page displays only names of drivers from my list. I am trying to make it so, when I click on one of them I would get their info displayed below. I am struggling with passing and index from addLink function to driverProfile , so I can display more details about that specific driver.

Here's the function:

drivers2020.forEach(addLink);

function addLink(driver, i) {
  const nameList = document.createElement('a');
  nameList.style.padding="20px";
  nameList.id = `listOfNames${i}`;
  nameList.textContent = driver.name;
  list2020.appendChild(nameList);
  nameList.addEventListener('click', driverProfile(driver));
}


function driverProfile(driver) {
  const div = document.createElement("div");
  const article = document.createElement('article');
  const span = document.createElement('span');
  const h1 = document.createElement('h1');

  h1.textContent = driver.name;
  span.textContent = driver.age;
  article.textContent = driver.nationality;

  div.appendChild(h1);
  div.appendChild(span);
  div.appendChild(article);

  return div;
}

myProfile = driverProfile(driver);
profile.appendChild(myProfile);

jsfiddle

Answer 1

Try calling the function inside of an anonymous function by passing this to refer that inside the event handler function.

Change:

nameList.addEventListener('click', driverProfile(driver));

To:

nameList.addEventListener('click', function(){ driverProfile(driver, this) });

When appending on clicking you can check if there is any children is exist or not. If exists then remove the element otherwise append the children.

const drivers2020 = [{
    name: "Kimi Raikonnen",
    age: "20",
    nationality: "Finland",
  },
  {
    name: "George Russel",
    age: "30",
    nationality: "UK",
  }
]

drivers2020.forEach(addLink);

function addLink(driver, i) {
  const nameList = document.createElement('a');
  nameList.style.padding="20px";
  nameList.style.width="250px"; //style added to show side by side
  nameList.style.float="left";  //style added to show side by side
  nameList.id = `listOfNames${i}`;
  nameList.textContent = driver.name;
  nameList.maxWidth = '200px';
  list2020.appendChild(nameList);
  nameList.addEventListener('click', function(){driverProfile(driver, this)});
}


function driverProfile(driver, el) {
  var content = el.querySelector('div');
  if(!content){
    const div = document.createElement("div");
    const article = document.createElement('article');
    const span = document.createElement('span');
    const h1 = document.createElement('h1');

    h1.textContent = driver.name;
    span.textContent = driver.age;
    article.textContent = driver.nationality;

    div.appendChild(h1);
    div.appendChild(span);
    div.appendChild(article);
    //alert(drhttps://jsfiddle.net/ch8o4z0k/13/#runiver.name)

    el.appendChild(div);
  }
  else{
    content.remove();
  }
}

<h1 align="center" id="hideH1">Drivers for 2020</h1>
<div id="list2020"></div>
<section id="profile"></section>

Update: You can wrap the elements inside of a parent element by providing a class:

const drivers2020 = [{
    name: "Kimi Raikonnen",
    age: "20",
    nationality: "Finland",
  },
  {
    name: "George Russel",
    age: "30",
    nationality: "UK",
  }
]

drivers2020.forEach(addLink);

function addLink(driver, i) {
  const wrapper = document.createElement('div');
  wrapper.classList.add('wrapper');
  wrapper.style.width="250px"; //style added to show side by side
  wrapper.style.float="left";  //style added to show side by side
  const nameList = document.createElement('a');
  nameList.style.padding="20px";
  nameList.id = `listOfNames${i}`;
  nameList.textContent = driver.name;
  nameList.maxWidth = '200px';
  wrapper.appendChild(nameList);
  list2020.appendChild(wrapper);
  nameList.addEventListener('click', function(){driverProfile(driver, this)});
}


function driverProfile(driver, el) {
  var content = el.closest('.wrapper').querySelector('div');
  if(!content){
    const div = document.createElement("div");
    const article = document.createElement('article');
    const span = document.createElement('span');
    const h1 = document.createElement('h1');

    h1.textContent = driver.name;
    span.textContent = driver.age;
    article.textContent = driver.nationality;

    div.appendChild(h1);
    div.appendChild(span);
    div.appendChild(article);
    //alert(drhttps://jsfiddle.net/ch8o4z0k/13/#runiver.name)

    //el.appendChild(div);
    el.parentNode.insertBefore(div, el.nextSibling);
  }
  else{
    content.remove();
  }
}

<h1 align="center" id="hideH1">Drivers for 2020</h1>
<div id="list2020"></div>
<section id="profile"></section>

Answer 2

You are executing driverProfile instead of setting it as event listener. You would have to pass a function that calls driverProfile, not the result of an immediate driverProfile call.

Also, right now your driverProfile never does anything with the div that it creates. Let's say we want to add it to profile for example, like you do with the first profile already:

nameList.addEventListener('click', () => {
  profile.appendChild(driverProfile(driver))
})