Javascript变量在JQuery中的作用域和使用

我对javascript和jquery知之甚少，但我能够将以下代码组合在一起。

当我点击html页面上的"nameCreationButton"按钮时，我想将"name"的结果添加到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>

两次声明变量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());
    });
});

演示

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

此外，还需要删除generator function中name变量的var声明。generator块（｛…｝）内的var 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);
 });
});

（*）如果您用引号填充了变量，它将被视为字符串

 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() );
   });
 });

相关内容

最新更新

热门标签：