如何对单击的元素运行相同的方法，但会产生不同的输出

Question

我有一个任务要求我使用构造函数创建5个car对象。每个对象都应该有关于汽车的基本信息作为属性，并且还必须包括showMore((方法，该方法显示一个对话框，该对话框显示关于汽车的更多细节。每当用户点击按钮时，都应该调用showMore((方法，并显示有关汽车的所有信息，包括注册号、价格等。我有该任务的代码，但每当我单击特定按钮时，它只显示最后一个对象的属性。

//constructor function
function cars(make, model, color, image, registration, price) {
this.make = make;
this.model = model;
this.color = color;
this.image = image;
this.registration = registration;
this.price = price;
}
//creating multiple objects
let car1 = new cars(2008, "ferrari", "red", "car_image1", "bcv4", "R13000");
let car2 = new cars(2009, "chev", "white", "car_image2", "bcv5", "R48000");
let car3 = new cars(2010, "bmw", "black", "car_image3", "bcv6", "R15000");
let car4 = new cars(2011, "mercedes", "yellow", "car_image4", "bcv7", "R16000");
let car5 = new cars(2012, "mini", "blue", "car_image5", "bcv8", "R17000");
//array storing multiple objects(cars)
let display_cars = [car1, car2, car3, car4, car5];
//for each car, we want a shomwore method that creates a dialog
//inside the dialog we want to display the objects values(make, model etc.)
display_cars.forEach(function(car) {
//for the specific car we are going to create  a dialog and text that is inside the dialog
let dialog = document.createElement("dialog"); //1
let text_dialog = document.createTextNode(
"Colour: " + car.color + ", Registration: " + car.registration
);
dialog.appendChild(text_dialog);
car.dialog = dialog;
//method should display the dialog
car.showmore = function() {
car.dialog.setAttribute("open", "open");
};
//when the button of the specific object is clicked, we want the dialog to be displayed
let btn1 = document.getElementById("first-car");
let btn2 = document.getElementById("first-car");
let btn3 = document.getElementById("first-car");
btn1.onclick = function() {
car.showmore();
};
btn2.onclick = function() {
car.showmore();
};
btn3.onclick = function() {
car.showmore();
};
let body = document.body;
body.appendChild(dialog);
});

<div id="car-details">
<button id="first-car">first-car</button>
<br>
<button id="second-car">second-car</button>
<br>
<button id="thid-car">thid-car</button>
<br>
<button id="fourth-car">fourth-ca</button>
<br>
<button id="fifth-car">fifth-ca</button>
</div>

Answer 1

拥有此解决方案

const body = document.body
const dialog = document.createElement('dialog')
class Cars {
constructor(make, model, color, image, registration, price) {
this.make = make
this.model = model
this.color = color
this.image = image
this.registration = registration
this.price = price
}
click() {
body.appendChild(dialog)
dialog.innerHTML = 'Colour: ' + this.color + ', Registration: ' + this.registration
dialog.setAttribute('open', 'open')
}
}
const car1 = new Cars(2008, 'ferrari', 'red', 'car_image1', 'bcv4', 'R13000')
const car2 = new Cars(2009, 'chev', 'white', 'car_image2', 'bcv5', 'R48000')
const car3 = new Cars(2010, 'bmw', 'black', 'car_image3', 'bcv6', 'R15000')
const car4 = new Cars(2011, 'mercedes', 'yellow', 'car_image4', 'bcv7', 'R16000')
const car5 = new Cars(2012, 'mini', 'blue', 'car_image5', 'bcv8', 'R17000')
let btn1 = document.getElementById('first-car')
let btn2 = document.getElementById('second-car')
let btn3 = document.getElementById('thid-car')
btn1.onclick = () => car1.click()
btn2.onclick = () => car2.click()
btn3.onclick = () => car3.click()

<div id="car-details">
<button id="first-car">first-car</button>
<br />
<button id="second-car">second-car</button>
<br />
<button id="thid-car">thid-car</button>
<br />
<button id="fourth-car">fourth-ca</button>
<br />
<button id="fifth-car">fifth-ca</button>
</div>