Question: help with javascript and html Modify the function makeMain#() to add a parameter named myproduct. It is an object that contains the values we want
help with javascript and html
- Modify the function makeMain#() to add a parameter named myproduct. It is an object that contains the values we want to display on the screen in the proper spot on the page. Change the code to add the text for Product Name, Product ID and Product Description with the correct object property value. If you look at the objects it should be obvious which property to use where in the output (e.g. Product ID should now become Product ID: 1). See example below.
- Test your change to see if it works. Change the html file to ADD the paramater to the original call to display the main section: makeMain#(product1) If it works, your page will display the HP 1 and its description. Test again, pass product2 and the page will display the Apple 88123. Test again, pass product3 and the page will display the Dell 2400.
- Modify the function makeMenu#() to display the word 'Menu:' and 3 buttons with the labels 'Product #1', 'Product #2' and 'Product #3'. Start with doing a simple display of the buttons, but then make sure EACH button calls the function in the next step. See example below.
- Write a function execButton000 that takes a product object as a parameter. If done right, the function should be simple. Call getElementById() and assign innerHTML the returned HTML from makeMain#(object). Pass it the proper object parameter and it will display a different product for each one on the MAIN section of the web page. For now you can use the examples above, but eventually change it display your own products. Get the picture? If the user clickes on the button 'Product #2', then execButton000 will change the main section of the screen to display the 'Apple 88123' for sale.
- When coded correctly, the main section of the page will change between the HP/Apple/Dell computers when you press the buttons on the menu. For now use the computer products, you will change it to to your type of product soon.
- Right now leave the 'Product Image' and 'Shopping Cart Link Bar' alone, the next labs will deal with graphics/carts and it will be changed at that point.
In the previous lab, makeMain#() just output some generic html to display something like:
My Product: Product Name: Product ID: Product Description: Shopping Cart Link Bar Product Image:
In this lab, an added parameter makeMain#(myproduct) will allow the html to display a specific product for sale:
My Product:
Product Name: HP 1 Product ID: 1 Product Description: Newest and Best Laptop from HP Computer Shopping Cart Link Bar Product Image And of course, when the parameter is change the product it displays will also change. The above example is the minimum amount of formatting you could do, as we continue in the labs improve the display of product with each lab.
In the previous lab, makeMenu#() just output some generic html to display something like:
My Menu: Button Button Betton
In this lab, makeMenu#() will return the html to display a button FOR EACH specific product for sale: Menu: Product #1 Product #2 Product #3
The above example is the minimum amount of formatting you could do, but don't think you have to make it look perfect for this lab. With each lab you can improve the looks of the page.
The real key to THIS LAB, is getting the buttons to work. When 'Product #1' is pressed it should call execButton000 with the correct parameter to display the HP. When 'Product #2' is pressed it should call execButton000 with the correct parameter to display the Apple. When 'Product #3' is pressed it should call execButton000 with the correct parameter to display the Dell.
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
