How do I run the same method for an element that is clicked, but resulting in a different output?

Question

I have a task asking me to create 5 car objects using a constructor function. Each object should have basic information about a car as properties and must also include a showMore() method that displays a dialog that displays more details about a car. Whenever a user clicks on a button, the showMore() method should be called and all the information about the car, including the registration number, price etc should be displayed. I have the code for the task, but whenever I click the specific button it only displays the last objects properties.

//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);
});

user_15169801 · Answer

Have this solution

    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()

How do I run the same method for an element that is clicked, but resulting in a different output?

1 Answers