HTML multiple forms with 2 javascripts

Question

first of all im new to javascript and html doing this for a requiered university project so this web development is not my strong point. Problem is:

I have 2 quiz on the same html file with 2 javascript files working for each one.

    <form name="quiz">
    1. listen to pronunciation...<br>
    <input type="radio" name="q1" value="a">Pedro<br>
   <img src="images/ANIMALES/8.png" width="100" height="100" /> <br>  
    <input type="radio" name="q1" value="b">Juan<br>
    <img src="images/ANIMALES/8.png" width="100" height="100" /> <br>  
    <input type="radio" name="q1" value="c">Luis<br>
    <img src="images/ANIMALES/8.png" width="100" height="100" /> <br>  
    <p>


    <input type="button" value="Get score" onClick="getScore(this.form)">
    <input type="reset" value="Clear"><p>
    Score = <input type=text size=15 name="percentage"><br>
    Correct answers:<br>
    <textarea name="solutions" wrap="virtual" rows="4" cols="40"></textarea>
    </form>

in the same html page this

       <form name="quiz2">
        1. listen to pronunciation...<br>
        <input type="radio" name="q2" value="a">Pedro<br>
       <img src="images/ANIMALES/8.png" width="100" height="100" /> <br>  
        <input type="radio" name="q2" value="b">Juan<br>
        <img src="images/ANIMALES/8.png" width="100" height="100" /> <br>  
        <input type="radio" name="q2" value="c">Luis<br>
        <img src="images/ANIMALES/8.png" width="100" height="100" /> <br>  
        <p>


        <input type="button" value="Get score2" onClick="getScore2(this.form)">
        <input type="reset" value="Clear"><p>
        Score = <input type=text size=15 name="percentage"><br>
        Correct answers:<br>
        <textarea name="solutions" wrap="virtual" rows="4" cols="40"></textarea>
        </form>

javascripts files are javascript1.js and javascript2.js (found those in quiz html generator)

var numQues = 1;
var numChoi = 3;

var answers = new Array(5);
answers[0] = "b";



function getScore(form) {
  var 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;
        }
      }
    }
  }

  score = Math.round(score/numQues*100);
  form.percentage.value = score + "%";

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

}

and the second one

var numQues = 1;
var numChoi = 3;

var answers = new Array(5);
answers[0] = "a";


function getScore2(form) {
  var 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;
        }
      }
    }
  }

  score = Math.round(score/numQues*100);
  form.percentage.value = score + "%";

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

}

However both forms always take the same answer ("a"), one is supposed to be correct answer"b", another "a", any clue what im doing wrong?

Answer 1

Your variables have the same names and are in the same scope. They are overriding each other.