單擊圖像 - 對話按鈕 Function 鏈接

Question

:) 我希望你一切都好。

我目前正在學習全棧 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-sm, .container { max-width: 960px; } } @media (min-width: 1200px) {.container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1140px; } } @media (min-width: 1400px) {.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .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>

如果有人能幫助我走上正確的軌道，我將不勝感激。

Answer 1

我認為你需要做以下事情：

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

你也可以這樣做：

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

希望能幫到你！