Exercise: onclick to call function

  • Due Oct 30, 2018 at 11:59pm
  • Points 2
  • Questions 1
  • Available Oct 23, 2018 at 12:15pm - Dec 18, 2018 at 11:59pm
  • Time Limit None
  • Allowed Attempts Unlimited

Instructions

The main point here is to get you started with setting a "click" event handler, and calling JS function with the right arguments.  

Here's a JS Fiddle that has a function (called "setColors") that takes two color values and changes the style of a paragraph based on these colors:
JS Fiddle "Set Colors"

There is a button "Harvard Colors" that sets the primary color to Harvard crimson and the secondary color to "parchment":
<button onclick="setColors('#a51c30','#F3F3F1')">Harvard Colors</button>
Note that the entire attribute value is in double quotes, while the color values are in single quotes.  The color values need to be in quotes so that JS treats them as a string!

Go ahead and click on the button "Harvard Colors" if you haven't already.  Click on "Reset Colors" to change them back.  Look at the two buttons in the HTML pane and see the markup.  Check out the JS pane and the "setColors" function.  Get an idea of how they work.  OK, now that you've tried it out, it is your turn!

There is a button for you to complete -- "Your Colors".  Add an onclick attribute that calls the setColors functions with two color values that you pick.  Confirm that it works.  This is an honor-system exercise -- no need to turn in the JS Fiddle URL, but feel free to save it for yourself.

For example, I might pick two colors from my undergraduate institution -- KU Blue (#0051BA) and KU Crimson (#E8000D) -- and do this: JS Fiddle "Set Colors with KU colors".  

Only registered, enrolled users can take graded quizzes