以下是任务
创建一个文件cars.js.在cars.js中：o使用构造函数创建5个汽车对象。o每个汽车对象都应该具有以下属性：品牌、型号、，颜色、图像、注册号、价格。o每个汽车对象还应该包括一个showMore((方法。这方法应显示一个对话框，其中显示有关特定的汽车对象。提示：请在此处查看更多信息。o创建一个用于显示品牌、模型和加载cars.html时cars.html中每个car对象的图像。●每当用户单击汽车的图像时，showMore((方法应拨打电话，并提供有关该车的所有信息，包括应显示注册号、价格等。是否已完成任务？
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("BMW", "M3","images/image1.jpg", "Black", "NP 123 000", "R1,400 000");
const car2 = new Cars("Volkswagon", "MK1","images/image2.jpg", "Red", "NP 321 000", "R100,000");
const car3 = new Cars("Ford", "Escort","images/image3.jpg", "Blue", "NP 465 487", "R1.400 000");
const car4 = new Cars("Volkswagon", "MK8","images/image4.jpg", "Silver", "NP 023 145", "R800,000");
const car5 = new Cars("Volkswagon", "MK2","images/image5.jpg", "Silver", "NP 007 007", "R450,000");
let btn1 = document.getElementById("first-car");
let btn2 = document.getElementById("second-car");
let btn3 = document.getElementById("third-car");
let btn4 = document.getElementById("fourth-car");
let btn5 = document.getElementById("fifth-car");
btn1.onclick = () => car1.click();
btn2.onclick = () => car2.click();
btn3.onclick = () => car3.click();
btn4.onclick = () => car4.click();
btn5.onclick = () => car5.click();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Car sales</title>
<link rel="stylesheet" href="cars.css" />
</head>
<body>
<h1>VEES CAR SALES</h1>
<div id="car-details">
<button id="first-car">first-car</button>
<br />
<button id="second-car">second-car</button>
<br />
<button id="third-car">third-car</button>
<br />
<button id="fourth-car">fourth-car</button>
<br />
<button id="fifth-car">fifth-car</button>
</div>
<script src="cars.js"></script>
</body>
</html>您的click函数需要创建一个元素，document.createElement('img')用于将this.image设置到image元素的属性中，src使用Element.setAttribute请参阅此链接https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
const body = document.body;
const dialog = document.createElement("dialog");
class Cars {
// you miss the src in constructor
constructor(make, model, src, color, image, registration, price) {
this.make = make;
this.model = model;
this.color = color;
this.image = image;
this.registration = registration;
this.price = price;
// set src of image
this.src = src;
}
click() {
body.appendChild(dialog);
// add image tag inside dialog
dialog.innerHTML = "<img src='" + this.src + "'>" +
"Colour: " + this.color + ", Registration: " + this.registration;
dialog.setAttribute("open", "open");
}
}
const car1 = new Cars("BMW", "M3", "images/image1.jpg", "Black", "NP 123 000", "R1,400 000");
const car2 = new Cars("Volkswagon", "MK1", "images/image2.jpg", "Red", "NP 321 000", "R100,000");
const car3 = new Cars("Ford", "Escort", "images/image3.jpg", "Blue", "NP 465 487", "R1.400 000");
const car4 = new Cars("Volkswagon", "MK8", "images/image4.jpg", "Silver", "NP 023 145", "R800,000");
const car5 = new Cars("Volkswagon", "MK2", "images/image5.jpg", "Silver", "NP 007 007", "R450,000");
let btn1 = document.getElementById("first-car");
let btn2 = document.getElementById("second-car");
let btn3 = document.getElementById("third-car");
let btn4 = document.getElementById("fourth-car");
let btn5 = document.getElementById("fifth-car");
btn1.onclick = () => car1.click();
btn2.onclick = () => car2.click();
btn3.onclick = () => car3.click();
btn4.onclick = () => car4.click();
btn5.onclick = () => car5.click();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Car sales</title>
<link rel="stylesheet" href="cars.css" />
</head>
<body>
<h1>VEES CAR SALES</h1>
<div id="car-details">
<button id="first-car">first-car</button>
<br />
<button id="second-car">second-car</button>
<br />
<button id="third-car">third-car</button>
<br />
<button id="fourth-car">fourth-car</button>
<br />
<button id="fifth-car">fifth-car</button>
</div>
<script src="cars.js"></script>
</body>
</html>