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

Question

所以我正在 Rails 中制作一个小型闪存卡应用程序，并使用 javascript 来实现卡片逻辑。我是 JS 新手，在重置我用于卡片front和back的变量时遇到了一些麻烦> 基于我的随机化函数的结果

<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.back”进行更新，但是当我翻转卡片“rand.back”时， front' 和 rand.back 返回 session 启动时我设置的初始值。我如何具体更新这些值？

Answer 1

在 randomCard 函数中，每次执行该函数时，都会在此函数的局部范围内创建新的 front 和 back 变量，并且使用 var 声明变量。

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

为了获得您想要的行为，请不要在 内部使用 var 关键字声明 front 和 back 变量>randomCard，以便对它们进行任何分配都发生在外部 front 和 back