Click on Image - Dialog Button Function Linking

Question

:) I hope that you are all well.

I am currently doing a Full Stack Web Development course and am new in the Javascript world. I am quite stuck at the following assignment question: "Whenever a user clicks on an image of a car, the showMore() method should be called and all the information about the car, including the registration number, price etc. should be displayed".

I have tried the following:

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

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

I have also tried to bind the two together, but nothing seems to work.

 /* 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>

I would appreciate it if someone can help me onto the right track.

Answer 1

I think that you need to do the following thing:

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

You can do this too:

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

Hope that could help you!