title: Passing array -- scope
body: <p>I want to pass an array from one external .js file to another. </p>
  
  <p>Each of these files works fine by themselves, but I am having a problem passing the array from pickClass.js to displayStudent.js, and getting the names and "remaining" value to display in the html file. I know it has something to do with how the arrays are declared, but I can't seem to get it to work properly. </p>
  
  <p><strong>The first file declares the array choice: 
  (masterStudentList.js):</strong></p>
  
  <pre><code>var class1 = ['Brown, Abe','Drifter, Charlie','Freed, Eve'];
  var class2 = ['Vole, Ug','Xylo, William','Zyzzyx, Yakob']; 
  </code></pre>
  
  <p>The second picks which array to use based on the radio buttons (pickClass.js):</p>
  
  <pre><code>var classPicked = array(1); 
  
   function randomize(){
     return (Math.round(Math.random())-0.5); } 
  
   function radioResult(){
   var chooseClass = document.getElementsByName("chooseClass");
  
   for (i = 0; i &lt; chooseClass.length; i++){currentButton = chooseClass[i];
      if (currentButton.checked){
        var selectedButton = currentButton.value;
      } // end if
    } // end for
  
  var output = document.getElementById("output");
  var response = "You chose ";
   response += selectedButton + "\n";
   output.innerHTML = response;
  
   chosenClass = new Array();
  if (selectedButton == "class1")
  {chosenClass = class1;}
  else
  {chosenClass = class2;}
  
  var text = "";
  var nametext = "";
  var i;
      for (i = 0; i &lt; chosenClass.length; i++) {
      text += chosenClass[i]+ ' / ';
  }
  
  
  var showText = "";  
   l = chosenClass.length;
   classPicked = Array(l);   
   for (var i = 0; i &lt; l; ++i) {
   classPicked[i] = chosenClass[i].split(', ').reverse().join(' ');
   showText += classPicked[i]+ '&lt;br&gt;';
  
  }
   //return = classPicked;
  document.getElementById("classList").innerHTML = classPicked;  
  
   } // end function
  </code></pre>
  
  <p><strong>This works properly.</strong> </p>
  
  <p>I then want to pass "classPicked" to another .js file (displayStudent.js) which will randomize the student list, loop and display the students for a few seconds, and then end with one student name. </p>
  
  <pre><code>basket = classPicked;  //This is where the array should be passed
  
  function randOrd(){
  return (Math.round(Math.random())-0.5); } 
  
   function showBasket(){
    mixedBasket = basket.sort( randOrd ); //randomize the array
    var i = 0;  // the index of the current item to show
    document.getElementById("remaining").innerHTML = basket.length; 
  
   fruitDisplay = setInterval(function() {            
     document.getElementById('showStud')
      .innerHTML = mixedBasket[i++];    // get the item and increment
   if (i == mixedBasket.length) i = 0;   // reset to first element if you've reached the end
    }, 100);  //speed to display items
  
   var endFruitDisplay = setTimeout(function() 
   { clearInterval(fruitDisplay); 
  
   var index = mixedBasket.indexOf(document.getElementById('showStud').innerHTML); 
  
   mixedBasket.splice(index,1); 
  
    }, 3500); //stop display after x milliseconds
   }
  </code></pre>
  
  <p><strong>Here is the html (master.html). It's just rough -- I'll be working on the layout later:</strong></p>
  
  <pre><code>&lt;html&gt;
     &lt;head&gt;
   &lt;script src="masterStudentList.js" type="text/javascript"&gt;&lt;/script&gt;
   &lt;script src="pickClass.js" type="text/javascript"&gt;&lt;/script&gt;
   &lt;script src="displayStudent.js" type="text/javascript"&gt;&lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;h2&gt;Choose Class&lt;/h2&gt;
   &lt;form action = ""&gt;
   &lt;fieldset&gt;
   &lt;input type = "radio"
   name = "chooseClass"
   id = "radSpoon"
   value = "class1"
   checked = "checked" /&gt;
   &lt;label for = "radSpoon"&gt;Class 1&lt;/label&gt;
   &lt;input type = "radio"
   name = "chooseClass"
   id = "radFlower"
   value = "class2" /&gt;
   &lt;label for = "radFlower"&gt;Class 2&lt;/label&gt;
  
   &lt;button type = "button"
    onclick = "radioResult()"&gt; Choose Class
   &lt;/button&gt;
   &lt;div id = "output"&gt;
   &lt;/fieldset&gt;
   &lt;/form&gt;
  
   &lt;/div&gt;
  
  &lt;center&gt;
  &lt;h1&gt; &lt;span id="chooseStud"&gt;&lt;/span&gt;&lt;p&gt;&lt;/h1&gt; 
  
   &lt;script&gt; var fruitSound = new Audio(); 
        fruitSound.src = "boardfill.mp3"; 
  
      function showFruitwithSound()
      { 
      fruitSound.play(); // Play button sound now 
      showBasket()
      } 
  &lt;/script&gt;
  
  Remaining: &lt;span id = "remaining" &gt;&lt;/span&gt;
  
  &lt;p&gt;
  &lt;button onclick="showFruitwithSound()"&gt;Choose Student&lt;/button&gt;
  
  &lt;/center&gt;  
  
  pickedClassList = &lt;p id = classList&gt; &lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>