Javascript 2 functions for onClick

Question

I am new to Javascript so please bear with me. I have a Javascript quiz which collects the answers and displays a score at the end of the quiz. The score is calculated on the event of a 'onClick'command at the end of the form, which I would then like to parse through to event tracking to Google analytics. At the moment, when the button is clicked if I try and parse the value of the score to the analytics it will not work. The exact same method does work if the variable is another defined integer (with a fixed value).

Here is my code:

var numQues = 5;    
var numChoi = 3;   
var url = location.href;  
var score = 0;  
var answers = new Array(5);  
answers[0] = "Play your pet a CD";  
answers[1] = "National PetLog database";  
answers[2] = "Certain types of cancers";  
answers[3] = "A few weeks";  
answers[4] = "Up to 1 year";  

function getScore(form) {  
 score = 0;  
  var currElt;  
  var currSelection;  

  for (i=0; i<numQues; i++) {  
    currElt = i*numChoi;  
    for (j=0; j<numChoi; j++) {  
      currSelection = form.elements[currElt + j];  
      if (currSelection.checked) {  
        if (currSelection.value == answers[i]) {  
          score++;  
          break;  
        }  
      }  
    }  
  }  
  form.score.value = score + "/" + numQues;  
  var correctAnswers = "";  
  for (i=1; i<=numQues; i++) {  
    correctAnswers += i + ". " + answers[i-1] + "\r\n";  
  }  
  form.solutions.value = correctAnswers;  


}  

function JavaScriptFunction(){  
  return(score);  
}

and the button is:

<input class="ScoreButton" onclick="getScore(this.form); pageTracker._trackEvent('Quiz', 'Petcare quiz', url, score);" type="button" value="Get score" />

Any help will be much appreciated.

Answer 1

Since you say that you are new to JavaScript then I would strongly recommend using a good JavaScript library like jQuery, YUI, Dojo, Prototype etc. There is a very good choice of good libraries. Such a library would greatly simplify your interaction with the DOM and with the browser event models. I only ever recommend not using a JavaScript library to people who are very experienced with JavaScript, the DOM and all of the browser quirks and incompatibilities.

If you don't want to use a library for some reason, then read this:

What are some empirical technical reasons not to use jQuery?

Answer 2

You are not sending the value to the tracker, try this:

<input class="ScoreButton" onclick="doStuff(this.form);" type="button" value="Get score" />

Edit:

function getScore(form) {  
 score = 0;  
  var currElt;  
  var currSelection;  

  for (i=0; i<numQues; i++) {  
    currElt = i*numChoi;  
    for (j=0; j<numChoi; j++) {  
      currSelection = form.elements[currElt + j];  
      if (currSelection.checked && currSelection.value == answers[i]) {  
          score++;  
          break;  
      }  
    }  
  }

  return score;  
}

function doStuff(form){
   //calculate score
   score = getScore(form);

   //replace value
   form.score.value = score + "/" + numQues;  

   //correct answers
   var correctAnswers = "";  
   for (i=1; i<=numQues; i++) {  
     correctAnswers += i + ". " + answers[i-1] + "\r\n";  
   }  
   form.solutions.value = correctAnswers;  

   //send data to track
   pageTracker._trackEvent('Quiz', 'Petcare quiz', url, score);
}

Edit: I've refactored a little bit your code. Maybe this way works or can find where is the error.

Answer 3

Instead of using the onclick attribute, you should be using event handlers.

<input id="score-button" type="button" value="Get Score">

Then in javascript...

var scoreButton = document.getElementById('score-button');
scoreButton.addEventListener('click', myFuncOne(), false);
scoreButton.addEventListener('click', myFuncTwo(), false);

Of course like other suggestions have mentioned, you should really be using a javascript library such as jQuery which provides a lot of tools that make your life easier.

In jQuery, the above code could be as short as...

$('#score-button').click(function() {
  myFuncOne();
  myFuncTwo();
});