Javascript变量的范围和在JQuery中的使用

Question

我对javascript和jquery的了解很少，但是我能够将以下代码放在一起。

当我单击html页面上的“ nameCreationButton”按钮时，我想将“名称”的结果添加到html页面上的div“ displayName”中。 当我单击“ nameCreationButton”时，绝对没有任何反应。

我在函数“ generator”之外声明了变量“ name”，因此我的jquery应该能够访问它，对吗？ 我花了几个小时研究这个问题，但由于不理解为什么它不起作用而感到愚蠢。

function generator(){

  var firstName = ["John","Mike","Robert","Patrick"];
  var lastName = ["Smith","Johnson","Williams","Anderson"];

  var randomNumber1 = parseInt(Math.random() * firstName.length);
  var randomNumber2 = parseInt(Math.random() * lastName.length);
  var name = firstName[randomNumber1] + " " + lastName[randomNumber2];
}

var name;

generator();

$(document).ready(function(){
 $(".nameCreationButton").click(function(){
    $(".displayName").append('name');
 });
});

这是我的HTML页面（如果有什么用）。

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='style.css'/>
    <script type= 'text/javascript' src='nameGenerator_JS.js'></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
 <body>
    <button class = "nameCreationButton">Click Here to Generate Name</button>
    <div class = "displayName"></div>
 </body>
</html>

Answer 1

两次声明变量name绝对没有意义。 您只能在generator()内部执行一次，并且要作为全局一次执行，这不是一个好主意。

相反，您想要的是在单击按钮后执行函数generator() 。 此函数需要返回name 。

要重写此：

function generator(){
    var firstName = ["John","Mike","Robert","Patrick"],
        lastName = ["Smith","Johnson","Williams","Anderson"],
        randomNumber1 = parseInt(Math.random() * firstName.length, 10),
        randomNumber2 = parseInt(Math.random() * lastName.length, 10);

    return firstName[randomNumber1] + " " + lastName[randomNumber2];
}

$(function(){
    $(".nameCreationButton").click(function(){
        //var name = generator();
        $(".displayName").append(generator());
    });
});

演示

Answer 2

您需要删除单'上的引号append('name')

而且，您还需要在generator function删除name变量的var声明。 generator块内的变量var name （{...}）使变量仅在该块内可见。 因此，在原始代码上，您将拥有两个不同的变量，它们的name分别为name和两个不同的作用域。

尝试：

function nameGenerator(){

  var firstName = ["John","Mike","Robert","Patrick"];
  var lastName = ["Smith","Johnson","Williams","Anderson"];

  var randomNumber1 = parseInt(Math.random() * firstName.length);
  var randomNumber2 = parseInt(Math.random() * lastName.length);
  return firstName[randomNumber1] + " " + lastName[randomNumber2];
}


$(document).ready(function(){
 $(".nameCreationButton").click(function(){
    var name = nameGenerator();
    $(".displayName").text(name);
 });
});

Answer 3

（*）您为变量加上了引号，它将被视为字符串

 var name = "aslan";
 console.log(name) //=> aslan
 console.log("name") //=> name

（*）同样，变量名在函数内部和外部声明。 在函数内部声明的变量被视为局部变量，因此在函数外部声明的var名称不会得到更新，我们使用了append（）。 检查： http : //snook.ca/archives/javascript/global_variable

将代码更改为：

 function generator(){

   var firstName = ["John","Mike","Robert","Patrick"];
   var lastName = ["Smith","Johnson","Williams","Anderson"];

   var randomNumber1 = parseInt(Math.random() * firstName.length);
   var randomNumber2 = parseInt(Math.random() * lastName.length);
   return  firstName[randomNumber1] + " " + lastName[randomNumber2];
 }


 $(document).ready(function(){
   $(".nameCreationButton").click(function(){
      $(".displayName").append( generator() );
   });
 });

Javascript变量的范围和在JQuery中的使用

问题描述

3 个解决方案

解决方案1
4 已采纳 2014-04-18 17:51:09

解决方案2
3 2014-04-18 17:47:55

解决方案3
2 2014-04-18 17:45:32

Javascript变量的范围和在JQuery中的使用

问题描述

3 个解决方案

解决方案1 4 已采纳 2014-04-18 17:51:09

解决方案2 3 2014-04-18 17:47:55

解决方案3 2 2014-04-18 17:45:32

解决方案1
4 已采纳 2014-04-18 17:51:09

解决方案2
3 2014-04-18 17:47:55

解决方案3
2 2014-04-18 17:45:32