尝试用javascript函数设置全局变量

Trying to set a global variable with javascript function

本文关键字：设置 全局变量 函数 javascript      更新时间：2023-09-26

所以我在rails中制作一个小闪存卡应用程序，我使用javascript进行卡片逻辑。我是JS的新手，我遇到了一些麻烦，resetting, variables，我使用的front和back卡基于我的randomizing function的结果

<script>
var card_list = "<%=j @deck.cards.to_json.html_safe %>";
console.log(card_list)
/* Parse the Json and get all the cards */
var cards = JSON.parse(card_list);
/* Return json object count */
var length = Object.keys(cards).length;
console.log(length)
/* Grab a random card from the card list */
var rand = cards[Math.floor(Math.random() * cards.length)];
console.log(rand)
/* Set the front label from random value */
var front = rand.front;
console.log(front)
/* Set the back label from random value */
var back = rand.back;
console.log(back)
/* Grab the div and set the label */
var elem = document.getElementById("card-face");
elem.innerHTML = rand.back;
/* Grab another random card from the card list */
function randomCard() {
 var rand = cards[Math.floor(Math.random() * cards.length)];
 console.log(rand)
 if (typeof front !== 'undefined') {
 alert("Undefined");
 }
 else{
 var front = rand.front;
 var back = rand.back;
 console.log("Should now be updated?")
 };
 var elem = document.getElementById("card-face");
 elem.innerHTML = rand.back;
}
/* Flip the card front to back */
function flipper() {
 var elem = document.getElementById("card-face");
 if (elem.innerHTML== rand.front) elem.innerHTML = rand.back;
 else elem.innerHTML = rand.front;
console.log(elem)
}
</script>

当我运行randomCard函数时，elem.innerHTML = rand.back;被更新为新的'rand。但是当我翻转卡片'rand.front'和rand.back返回会话开始时设置的初始值时。我如何具体地更新这些值?

在randomCard函数中，每次执行函数并使用var声明变量时，都要在该函数的局部作用域中创建新的front和back变量。

由于名称为front和back的变量现在位于该函数的局部作用域中，因此赋值发生在局部front和back变量上，因为它们存在于直接上下文中;它不需要查看randomCard函数之外的上下文，其中front和back变量是您想要更新的。

为了获得你想要的行为，简单地不要用var关键字声明front和back变量，在你的randomCard内，这样对它们的任何赋值都发生在外部的front和back

replace 

 var rand = cards[Math.floor(Math.random() * cards.length)];


 rand = cards[Math.floor(Math.random() * cards.length)];
相关文章：