The problem becomes pretty evident if you look at the generated HTML. In it, you'll have '[object Object]' just because that's what happens if you try to convert an object into a string, and it's kind of obvious that from this point you can't call makeEditable() and expect the object to magically appear back - you end up calling the function with '[object Object]' as an argument and, well, this isn't the object you're looking for.

I'm seeing two possible approaches:

1. Try to shove the entire object into the HTML like so:

function renderCar(car) {
  return `<div><div data-type="color">${car.color}</div><div data-type="type">${car.type}</div><div data-type="capacity">${car.capacity}</div><button onclick="makeEditable('${encodeURI(JSON.stringify(car))}')">Edit</button></div>`;
}

... then, to properly retrieve it, you'd have to reverse the process in the makeEditable() function:

function makeEditable(data) {
  let car = JSON.parse(decodeURI(data));
  console.log(car);
}

... but that's kind of ugly and might not always work.

Edit: the approach above using btoa() and atob() (instead of encodeURI(JSON.stringify() and then JSON.parse(decodeURI(data)) respectively) might be better if going this route, I just hadn't thought of that at the time of writing.

2. Store some unique IDs with the data and only pass that into the HTML, then use it to do a lookup on the array:

let cars = [
  {
    color: "purple",
    type: "minivan",
    capacity: 7,
    id: "2a93d4e1-9ee9-4490-b4a8-da836cf81d7f",
  },
  {
    color: "red",
    type: "station wagon",
    capacity: 5,
    id: "aa207e90-08d1-434f-afeb-aed1dbd1dab9",
  }
];

cars.map((car) => {
  this.root.innerHTML += this.renderCar(car);
});

function renderCar(car) {
  return `<div><div data-type="color">${car.color}</div><div data-type="type">${car.type}</div><div data-type="capacity">${car.capacity}</div><button onclick="makeEditable('${car.id}')">Edit</button></div>`;
}

function findById(id, array) {
  return array.find((e) => e.id === id);
}

function makeEditable(id) {
  let car = findById(id, cars);
  console.log(car);
}

I think you can create a document fragment or just an element and attach the event listeners to it. This way you will have more agility passing any type of argument.

However, if you really want to make it work the way you have tried then consider the example below.

I'd say implementation of it is overkill but it works.

Basically, any parameter passed this way will be converted to a string(because it is wrapped with quotes). To take advantage of it you can stringify your object and encode it base64(to keep it as string), and in target function just decode&parse it the same way.

const cars = [
  {
    color: 'purple',
    type: 'minivan',
    capacity: 7,
  },
  {
    color: 'red',
    type: 'station wagon',
    capacity: 5,
  },
];

cars.forEach((car) => {
  this.root.innerHTML += renderCar(car);
});

function makeEditable(car) {
  const parsed = JSON.parse(atob(car));
  console.log(parsed);
}

function renderCar(car) {
  const stringified = btoa(JSON.stringify(car));
  return `
    <div>
      <div data-type='color'>${car.color}</div>
      <div data-type='type'>${car.type}</div>
      <div data-type='capacity'>${car.capacity}</div>
      <button onclick="makeEditable('${stringified}')">Edit</button>
    </div>
  `;
}

<div id="root"></div>