JavaScript - 如何在.js文件之间传递全局变量？

I'm pretty new to JavaScript, and programming in general. I think I'm going about this the wrong way but I'll try to explain what I'm trying to do and how I'm doing it. It's not working.

我对JavaScript和编程很新。我想我会以错误的方式解决这个问题，但我会尝试解释我正在尝试做什么以及我是如何做的。它不起作用。

I made a page with five boxes that you can click. When you click one, it will run a function stored in one js file and look through cases to find the one that matches, then change the text in the text box as well as the choices in the five boxes below. I think I'm having trouble with global variables not carrying over from one included .js file to another.

我创建了一个包含五个框的页面，您可以单击它。单击一个时，它将运行存储在一个js文件中的函数，并查看案例以查找匹配的函数，然后更改文本框中的文本以及下面五个框中的选项。我认为我遇到的问题是全局变量没有从一个包含的.js文件转移到另一个.js文件。

I can't think of another way of doing this. I can't just return a single variable since I need to change around 5 separate variables for each case statement for each choice. Is there a better way of carrying this information back and forth than these $choice variables that don't seem to work?

我想不出另一种方法。我不能只返回一个变量，因为我需要为每个选项的每个case语句更改大约5个单独的变量。是否有更好的方式来回传递这些信息，而不是那些似乎不起作用的$选择变量？

file 1.js

档案1.js

var $choice1 = "0";
var $choice2 = "0";
var $choice3 = "0";
var $choice4 = "0";
var $choice5 = "0";

//Main Body - start doing stuff once the page has loaded    
$( document ).ready(function() {    

//Run once
NewArea("newgame");

$("#choice1").click(function() {
    NewArea($choice1);
    });

$("#choice2").click(function() {
    NewArea($choice2);
    });

$("#choice3").click(function() {
    NewArea($choice3);
    });

$("#choice4").click(function() {
    NewArea($choice4);
    });

$("#choice5").click(function() {
    NewArea($choice5);
    });

});

and then we have file 2.js

然后我们有文件2.js

function NewArea($area) {
    switch($area)
    {
    case "newgame": //Start of the game
        $("#textbox").html("blah");
        $("#choice1").html("Look around");
            $choice1 = "look_1";
        $("#choice2").html("Listen around");
            $choice1 = "listen_1";
        $("#choice3").html("Smell around");
            $choice1 = "smell_1";
        $("#choice4").html("Feel around");
            $choice1 = "feel_1";
        $("#choice5").html("Taste around");
            $choice1 = "taste_1";
        break;

    case "look_1":
        $("#textbox").html("blah2");
        $("#choice1").html("");
            $choice1 = "0";
        break;

    default:
        break;
    }
}

2 个解决方案

#1

You should at least consider namespacing the global variables for clarity and slightly cleaner code. You can also make it an array rather than discrete variables so you can easily expand them if necessary (bearing in mind your indexing from your ids will be off by 1, since arrays are 0-indexed):

您至少应该考虑使用命名空间全局变量来获得清晰度和更清晰的代码。你也可以把它变成一个数组而不是离散的变量，这样你就可以在必要的时候轻松扩展它们（记住你的id的索引将会偏离1，因为数组是0索引的）：

var myGame = {
    choices: [0, 0, 0, 0, 0];
};

As others have mentioned, the key is that this snippet of code loads before your file2.js (either by loading it in a separate file before file1.js and file2.js, or ensuring file1.js loads before file2.js).

正如其他人所提到的，关键是这段代码在file2.js之前加载（通过在file1.js和file2.js之前将其加载到单独的文件中，或者确保file2.js在file2.js之前加载）。

You mention you don't know another way of doing this, and it seems like you're using a DOM-gnostic jQuery approach, so other things that may work (though not necessarily better) are:

你提到你不知道另一种方法，看起来你正在使用DOM-gnostic jQuery方法，所以其他可能有用的东西（虽然不一定更好）是：

Storing the choices in hidden input fields. This will clutter your DOM instead of the global namespace. ;) So you can have <input type='hidden' value='0' name='choice1Value'/> and then get/set the value in there.
在隐藏的输入字段中存储选项。这将使您的DOM混乱而不是全局命名空间。 ;）所以你可以有然后获取/设置那里的值。
You can also use the jQuery data function to store the value on each choice: $('#choice1').data('choice', 0); for example.
您还可以使用jQuery数据函数将值存储在每个选项上：$（'＃choice1'）。data（'choice'，0）;例如。

There are other refactorings you could consider as well, but it depends on the structure of your files and how you load them, but hopefully this provides a few ideas on different approaches.

您还可以考虑其他重构，但这取决于文件的结构以及如何加载它们，但希望这提供了一些关于不同方法的想法。

#2

use it like this

像这样使用它

<script type='text/javascript' > 
  window.$choice1 = "0";
  window.$choice2 = "0"; 
  window.$choice3 = "0";
  window.$choice4 = "0";
  window.$choice5 = "0";
</script>

then below link file1.js and file2.js

然后在链接file1.js和file2.js下面

#1

var myGame = {
    choices: [0, 0, 0, 0, 0];
};