Passing array -- scope

Question

I want to pass an array from one external .js file to another.

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.

The first file declares the array choice: (masterStudentList.js):

var class1 = ['Brown, Abe','Drifter, Charlie','Freed, Eve'];
var class2 = ['Vole, Ug','Xylo, William','Zyzzyx, Yakob'];

The second picks which array to use based on the radio buttons (pickClass.js):

var classPicked = array(1); 

 function randomize(){
   return (Math.round(Math.random())-0.5); } 

 function radioResult(){
 var chooseClass = document.getElementsByName("chooseClass");

 for (i = 0; i < 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 < chosenClass.length; i++) {
    text += chosenClass[i]+ ' / ';
}


var showText = "";  
 l = chosenClass.length;
 classPicked = Array(l);   
 for (var i = 0; i < l; ++i) {
 classPicked[i] = chosenClass[i].split(', ').reverse().join(' ');
 showText += classPicked[i]+ '<br>';

}
 //return = classPicked;
document.getElementById("classList").innerHTML = classPicked;  

 } // end function

This works properly.

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.

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
 }

Here is the html (master.html). It's just rough -- I'll be working on the layout later:

<html>
   <head>
 <script src="masterStudentList.js" type="text/javascript"></script>
 <script src="pickClass.js" type="text/javascript"></script>
 <script src="displayStudent.js" type="text/javascript"></script>
 </head>
 <body>
  <h2>Choose Class</h2>
 <form action = "">
 <fieldset>
 <input type = "radio"
 name = "chooseClass"
 id = "radSpoon"
 value = "class1"
 checked = "checked" />
 <label for = "radSpoon">Class 1</label>
 <input type = "radio"
 name = "chooseClass"
 id = "radFlower"
 value = "class2" />
 <label for = "radFlower">Class 2</label>

 <button type = "button"
  onclick = "radioResult()"> Choose Class
 </button>
 <div id = "output">
 </fieldset>
 </form>

 </div>

<center>
<h1> <span id="chooseStud"></span><p></h1> 

 <script> var fruitSound = new Audio(); 
      fruitSound.src = "boardfill.mp3"; 

    function showFruitwithSound()
    { 
    fruitSound.play(); // Play button sound now 
    showBasket()
    } 
</script>

Remaining: <span id = "remaining" ></span>

<p>
<button onclick="showFruitwithSound()">Choose Student</button>

</center>  

pickedClassList = <p id = classList> </p>

</body>
</html>

score 0 · Answer 1 · answered Dec 26 '14 at 14:43

0

You can't pass things to files; you could call a function defined in displayStudent.js, pass it classPicked, and have it assign it to basket.

answered Dec 26 '14 at 14:43

Scott Hunter

48,888
12
60
101

rfornal · Answer 2 · 2014-12-26T16:20:19.227

0

I noticed this at the end of your second chunk of code ...

} // end function

This could indicate the classPicked is declared inside a function (I don't see one on the code). Because it is inside function scope, your set of code that is trying to use it cannot.

Push the declaraction of classPicked outside of the function.

var classPicked = Array(1);

function thisusesclasspicked() {
  ...

Also, please start indenting your code properly, it will become much easier to maintain and read.

UPDATE FROM COMMENTS:

I see the declaration now ...

classPicked = Array(l);   
for (var i = 0; i < l; ++i) {
  classPicked[i] = chosenClass[i].split(', ').reverse().join(' ');
  showText += classPicked[i]+ '<br>';
}

... however, you are re-assigning the array with an element of one just before you attempt to make modifications to it ... You are emptying it there: classPicked = Array(l);

edited Dec 26 '14 at 16:20

answered Dec 26 '14 at 14:48

rfornal

5,072
5
30
42

Sorry -- I somehow failed to copy the first few lines of "pickClass." I did declare the array outside the function, but it isn't passing anything over. "classPicked" is the result of the radio button choice, and then reverses the names from 'Last, First' to 'First Last'. – Tyler330 Dec 26 '14 at 16:14
Updated ... the issue is documented here. – rfornal Dec 26 '14 at 16:20
When it is passed back to the html page at the end (document.getElementById("classList").innerHTML = classPicked;) the final version of the array exists. So I am not clear why it isn't passing to the next function. – Tyler330 Dec 26 '14 at 16:27

score 0 · Accepted Answer · edited May 23 '17 at 10:26

You shouldn't use global variable like this (I encourage you to read more on this theme) and I'm not sure I understand what you're trying to do... but the solution of your issue should be to move the basket = classPicked; line into your showBasket method :

basket = classPicked;  //This is where the array should be passed

function randOrd(){
  return (Math.round(Math.random())-0.5);
}

function showBasket(){
  // whatever
}

should be :

function randOrd(){
  return (Math.round(Math.random())-0.5);
}

function showBasket(){
  basket = classPicked;  //This is where the array should be passed
  // whatever
}

This way, each time you call showBasket, this method will use the last value of classPicked. Otherwise, basket will always keep the reference on the first value of classPicked.

Why ? because each time you assign a new Array to the basket variable (classPicked = Array(l);) instead of changing directly it's content by :

emptying it : while (classPicked.length > 0) { classPicked.pop(); }
and then adding new data : classPicked.concat(chosenClass)

Passing array -- scope

3 Answers3