Question

我有以下HTML代码。我创建了一个客户对象。（custForATM.js中的约束器）：

<html>
    <script src="js/custForATM.js"></script>
    <script src="js/ATM.js"></script>   
    <script type="text/javascript">
        var customer = new CustomersATM("300321758","1234","Eric");
    </script>
<body>
    <button onclick="changeID()">Add One to Customer ID</button>
</body>
</html>

函数changeID（）位于不同的JS文件（ATM.js）中。我希望单击此按钮将添加将变量“customer”发送到changeID 功能。可能吗？（我知道我可以将此方法移动到html文件中。但我不想要。

谢谢！

Answer 1

在您的示例中，customer是一个全局变量。您应该能够执行以下操作：

<button onclick="changeID(customer)">Add One to Customer ID</button>

Answer 2

在全球范围内（又名“窗口”），变量是全局的。

检查出来：

//this is global because it is in the global scope (the window)
var foo = 'stuff';
//because it is global (window) you can also access it like this:
console.log(window.foo); //'stuff'

现在，您可以随时随地访问foo。值得注意的是全局变量不是最佳实践 - 因此请查看面向对象编程（SOLID原则）。

如果您在另一个范围内（如函数）并且不使用var关键字创建变量，则该变量将是全局变量：

function someFunction() {
  someVariable = 'stuff'; //this created a global variable! (or references an existing one)
  //you could also assign it to window:
  window.someVariable = 'stuff';
  //both are the same thing!
}

内联js（你的html中的onclick）不是一个好习惯。相反，您可以遵循良好做法并使用javascript注册点击事件：

//get reference to button
var myBtn = document.getElementById('myBtn');

//add click function
myBtn.addEventListener('click', function(event) {
  myFunction();
});

function myFunction() {
  console.log(foo); //'stuff' 
}

以下是所有这些的演示：http://jsbin.com/OmUBECaw/1/edit

请注意，在将元素引用加载到dom后，您需要获取元素引用。最佳做法是在正文结束之前而不是在头部包含脚本，如下所示：

  <!-- scripts here! -->
  <script></script>
</body>

如果您必须将脚本保留在head中，那么您需要将您的javascript代码放在一个函数中以运行窗口的加载：

window.addEventListener('load', function() {
  //code here!
});

Answer 3

你可以简单地内联这个。但是随着你的逻辑变得越来越复杂，最终将事件处理分解为头部脚本也是有意义的。

您可以绑定到window.onload事件，然后找到您的按钮元素（最好使用元素上的id），然后绑定一个onlcick事件，该事件将发送参数。

<html>
<script src="js/custForATM.js"></script>
<script src="js/ATM.js"></script>   
<script type="text/javascript">
    var customer = new CustomersATM("300321758","1234","Eric");
    window.onload = function(){
     document.getElementById("changeId").onclick = function(){
      changeID(customer);
     };
    };
</script>
<body>
 <button id="changeId">Add One to Customer ID</button>
</body>
</html>

Answer 4

这应该有效。（删除“var”使变量成为全局）

<html>
<script src="js/custForATM.js"></script>
<script src="js/ATM.js"></script>   

<script type="text/javascript">

customer = new CustomersATM("300321758","1234","Eric");

 </script>
 <body>

<button onclick="changeID(customer)">Add One to Customer ID</button>
</body>
</html>

是否可以在JAVASCRIPT中创建全局变量？

4 个答案: