In the previous exercise you learned how to extract data from an object and inject it into a webpage. During the process you created a drop-down list that triggered a function so that, whenever a given value was clicked, a student’s name, image, and quotes appeared on a web page.
Your job for this assignment is to create something very similar with a couple of twists. Here are the instructions:
- Using object.js from the previous lesson as an example, create your OWN object with at least 5 name value pairs. For example, in object.js, AlexW through Amy would count as 5 name value pairs.
- Create just ONE function that will display the value of a given name on a web page when a button is clicked. This will require you to add an argument to your function and add a value for the argument when you call the function from a button.
- Create a series of buttons on a webpage that will call the function and display the value for a given name when the button is clicked. You can hard-code the buttons into html (the easy way) or impress me and use JavaScript to generate the buttons in your html (the hard way).
Hint: When you call the function from a button you will need to use single quotes around the argument. In the example below, my function is titled nameit and AlexW is the argument.
onclick=”nameit(‘AlexW’)”
Caveat. I use the term name because objects contain names and values, but you don’t actually have to use someone’s name. The ‘names’ can be anything that you want them to be.