单击图像 - 对话框按钮功能链接

如何解决单击图像 - 对话框按钮功能链接

:) 希望你们一切都好。

我目前正在学习全栈 Web 开发课程，并且是 Javascript 世界的新手。我对以下分配问题非常困惑：“每当用户单击汽车图像时，应调用 showMore() 方法并显示有关汽车的所有信息，包括注册号、价格等” .

我尝试了以下方法：

imgProfile.onClick function = { carButton.innerHTML = "car.showMore()" }

image.onclick = function (showMore){ showMore(); }

我也尝试将两者绑定在一起，但似乎没有任何效果。

/* CREATED FUNCTIONAL CONSTRUCTOR */
function CarDescription(make,model,colour,image,registration,price) {
  this.make = make;
  this.model = model;
  this.colour = colour;
  this.image = image;
  this.registration = registration;
  this.price = price;
}

/* POPULATED/ SET PROPERTIES OF THE CARS */
let car1 = new CarDescription(
  "Chevrolet","Coupe","Tan Brown","images/Chevrolet.png","DL 24 23","R 795 000.00"
);
let car2 = new CarDescription(
  "Renault","NN1","Green","images/Renault.png","DH 48 70","R 645 000.00"
);
let car3 = new CarDescription(
  "Peugeot","203 Pick-up","Red","images/Peugeot.png","OAS 905","R 575 000.00"
);
let car4 = new CarDescription(
  "Packard","One Twenty","Yellow","images/Packard.png","NT 5235 PO","R 685 000.00"
);
let car5 = new CarDescription(
  "Volga","Gaz-21","Black","images/Volga.png","AX 0210 BP","R 565 000.00"
);

/* CREATED CAR ARRAY */
let myCars = [car1,car2,car3,car4,car5];

/* CREATED FUNCTION TO SHOW CARS WHEN PAGE IS LOADED */
let loaded = {};

loaded.addCars = function () {
  /* FOR EACH METHOD USED TO LOOP THROUGH ARRAY */
  myCars.forEach(function(car) {
    /* INFORMATION TO BE LOADED TO <DIV> ELEMENT IN HTML */
    let div = document.getElementById("carDetails");
    /* CREATED IMAGE ELEMENT AND SET THE PROPERTIES */
    let imgProfile = document.createElement("img");
    imgProfile.src = car.image;
    imgProfile.alt = car.make + " " + car.model;
    imgProfile.style.height = "320px";
    imgProfile.style.width = "480px";

    /* CAR MAKE AND MODEL SET TO DISPLAY AS HEADING */
    let carName = document.createElement('h2');
    carName.innerHTML = car.make + " " + car.model;

    /* SHOWMORE BUTTON CREATED */
    let carButton = document.createElement("button");
    carButton.innerHTML = "Show More";

    /* CREATED DIALOG TO DISPLAY INFORMATION */
    let carDialog = document.createElement("dialog");
    let dialogInfo = document.createTextNode("Colour: " + car.colour + ",Registration: " + car.registration + ",Price: " + car.price);
    carDialog.appendChild(dialogInfo);

    /* DIALOG ATTACHED TO CAR OBJECT */
    car.dialog = carDialog;

    /* SET DIALOG OPEN PROPERTIES */
    car.showMore = function () {
      myCars.forEach(function (curr) {
        curr.dialog.removeAttribute("open");
      })
      car.dialog.setAttribute("open","open");
    };

    carButton.addEventListener("click",function (e) {
      car.showMore();
    });

    let lineBreak = document.createElement("div");
    lineBreak.classList.add("spacer")

    /* ELEMENTS APPENDED TO PARENT DIV */
    div.appendChild(imgProfile);
    div.appendChild(carName);
    div.appendChild(carButton);
    div.appendChild(carDialog);
    div.appendChild(lineBreak);
  });
};
loaded.addCars();

@media (min-width: 576px) {
    .container-sm,.container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container-md,.container-sm,.container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container-lg,.container-md,.container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container-xl,.container-lg,.container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container-xxl,.container-xl,.container {
        max-width: 1320px;
    }
}

@media (max-width: 575.98px) {
    .table-responsive-sm {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 767.98px) {
    .table-responsive-md {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 991.98px) {
    .table-responsive-lg {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 1199.98px) {
    .table-responsive-xl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 1399.98px) {
    .table-responsive-xxl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

body {
    margin-right: auto;
    margin-left: auto;
    font-family: "Helvetica","Arial";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #a6b89e;
    width: 100%;
    padding: 0px;
}

#navigation-container {
    position: absolute;
    width: 1600px;
    margin: auto;
    height: 110px;
}

.navigation-bar {
    background-color: #104F3A;
    box-shadow: inset 0 0 20px black;
    height: 200px;
    width: 100%;
    text-align: center;
}

.navigation-bar img {
    float: left;
}

nav ul {
    padding: 35px 100px 0px 0px;
    margin: 0px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    background-color: none;
}

.navigation-bar li {
    background-color: #104F3A;
    list-style-type: none;
    padding: 0px;
    height: 24px;
    margin-top: 4px;
    margin-bottom: 4px;
    display: inline;
}

.navigation-bar li a {
    color: black;
    font-size: 16px;
    font-weight: bold;
    font-family: "Helvetica","Arial";
    text-decoration: none;
    line-height: 110px;
    padding: 5px 15px;
}

.navigation-bar li a:hover {
    color: white;
}

.logo {
    position: relative;
    float: left;
    height: 60px;
    margin: 0px;
    padding: 0px;
}

#menu {
    float: right;
}

div {
    margin-left: auto;
    margin-right: auto;
}

h1 {
    text-align: center;
    text-decoration: underline;
}

h3 {
    text-align: center;
}

p {
    text-align: center;
}

button {
    padding: 10px;
    border: 1px solid black;
    border-radius: 5px;
    background-color: #104F3A;
    color: white;
    box-shadow: inset 0 0 20px black;
    font-family: "Helvetica","Arial";
    font-size: 1rem;
    text-decoration: none;
    margin-right: 50px;
}

img {
    margin: 50px;
}

dialog {
    position: relative;
    height: 369px;
    width: 180px;
    margin-top: -400px;
    margin-left: 600px;
    font-weight: bold;
    text-align: center;
    border: none;
    background-color: transparent;
}

footer {
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    background-color: #104F3A;
    box-shadow: inset 0 0 20px black;
}

footer p {
    color: black;
    font-family: "Helvetica","Arial";
    text-align: center;
    padding: 30px;
}

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Vinta Motors</title>
    <link rel="stylesheet" href="css/cars.css" type="text/css">
</head>

<body>
    <nav class="navigation-bar">
        <div id="navigation-container">
            <img src="images/Logo.png" alt="Logo" />
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="AboutUs.html">About Us</a></li>
                <li><a href="Catalogue.html">Our Catalogue</a></li>
                <li><a href="ContactUs.html">Contact Us</a></li>
            </ul>
        </div>
    </nav>
    
    <h1>We are Vinta Motors</h1>
    <p>We are a family-owned company that specializes in collector vintage cars. We source these magnificent vehicles and offer them at the best prices. The cars are in mint condition and will be the pride and joy of any person's collection.</p>
    <div id="carDetails" class="container"></div>

    <h3>Contact us today to book a viewing:</h3>
    <p>031 563 5133</p>

    <h3>Pay us a visit. Our address is:</h3>
    <p>56 Rowland Place,Kingdom,Durban,3645</p>

    <h3>Our trading hours are:</h3>
    <p><b>Monday - Friday:</b> 08:00 - 17:00</p>
    <p><b>Saturday:</b> 08:00 - 14:00</p>
    <p><b>Sundays and Public Holidays:</b> Closed</p>


    <script type="text/javascript" src="js/cars.js"></script>

    <footer>
        <p> &copy; Hyperion Development.&nbsp;&nbsp; All Rights Reserved.&nbsp;&nbsp; Proudly created by <a
                href="http://www.hyperiondev.com">Hyperion Development</a></p>
    </footer>
</body>

</html>

如果有人能帮助我走上正轨，我将不胜感激。

解决方法

我认为你需要做以下事情：

imgProfile.onclick = function showMore(event) {
        car.showMore()
}

你也可以这样做：

imgProfile.onclick = (event)=>{
        car.showMore()
}

希望能帮到你！