使用多个按钮（几乎（相同））调用JS函数

Question

I'm looking at the possibility to create Japanese learning site with some basic interactivity in the form of exercises for the readers. Suppose I have a table like so:

--------------------------------------------
| characters | definition | roman letters   |
--------------------------------------------
| こんにちは  | hello       | <input type="text">   |
---------------------------------------------
| ...        |            |  <input type="text">  |
--------------------------------------------
|          <grade button> <show answers button> <clear fields button>
------------------------------------------

So the user reads the characters, learns the definition and writes it in the input fields with roman letters. When he or she is finished, he can check his answers by pushing the grade button, which will mark the input text in red or green color. Or they can give up and show the answers with the second button, and then clear the answers with the third.

The way this is done now, is that I have an ID for the table and have 3 Javascript functions that does the work described above. The first one takes and ID and an array of correct answers, then sets the colors of all the input fields according to the right answers with JQuery. For example, if the ID for the table is #ex1 then I use the selectors #ex1 :text . The second button also needs an ID and an array of correct answers. The third button needs only the ID for the table.

So in the HTML I for a table I would have something like:

<button onclick='grade("ex1", ["some", "array", "with", "answers"])'

<button onclick='showAnswers("ex1", ["some", "array", "with", "answers"])'

<button onclick='clear("ex1")'

This works, but is somewhat ugly because I repeadetly use the same arguments. So can anyone suggest a better approach?

Edit: I need to have more than one of these per page.

Answer 1

You can put the answers in a global variable and then you pass it as parameter. Somewhere in your $(document).ready() block you just type

corectAnswers = ["some", "array", "with", "answers"]; 

and call the functions with

showAnswers("ex1", correctAnswers); 

You may be tempted to use correct answers as the global variable inside of functions and not pass it as a parameter but it's better if you avoid that.

If you are not using jquery you can put the variables assignment in first block on the page ...