Question

我想将一个外部.js文件中的数组传递给另一个。

这些文件中的每一个都可以正常工作，但是我在将数组从pickClass.js传递给displayStudent.js时遇到了问题，并且获取了名称和＃34;剩余的＆＃34;要在html文件中显示的值。我知道它与如何声明数组有关，但我似乎无法让它正常工作。

第一个文件声明了数组选择：（masterStudentList.js）：

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

第二个选择基于单选按钮（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

这种方式正常。

然后我想通过＆＃34; classPicked＆＃34;到另一个.js文件（displayStudent.js），它将随机化学生列表，循环并显示学生几秒钟，然后以一个学生姓名结束。

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
 }

这是html（master.html）。它很粗糙 - 我稍后会在布局上工作：

<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>

Answer 1

您无法将内容传递给文件;您可以调用displayStudent.js中定义的函数，将其传递给classPicked，然后将其分配给basket。

Answer 2

我在第二块代码的末尾注意到了这一点......

} // end function

这可能表示classPicked已在函数内声明（我不会在代码中看到一个）。因为它在函数范围内，所以试图使用它的代码集不能。

将classPicked的声明推到函数之外。

var classPicked = Array(1);

function thisusesclasspicked() {
  ...

此外，请开始正确缩进代码，维护和阅读将变得更加容易。

评论更新：

我现在看到宣言......

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

...但是，在尝试对其进行修改之前，您正在为数组重新分配一个元素...您在那里清空它：classPicked = Array(l);

Answer 3

你不应该像这样使用全局变量（我鼓励你阅读更多关于这个主题的内容）并且我不确定我是否理解你正在尝试做什么...但是解决方案您的问题应该是将basket = classPicked;行移到您的showBasket方法中：

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

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

function showBasket(){
  // whatever
}

应该是：

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

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

这样，每次调用showBasket时，此方法都会使用classPicked的最后一个值。否则，basket将始终将引用保留在classPicked的第一个值。

为什么？因为每次您将新数组分配给basket变量（classPicked = Array(l);）而不是直接更改其内容：

emptying it：while (classPicked.length > 0) { classPicked.pop(); }
然后adding new data：classPicked.concat(chosenClass)

传递数组 - 范围

3 个答案: