javascript - 将 box 的 innerHTML 设置为多个数组之一的元素

Question

我正在尝试创建一个网站（为了好玩），它将成为终极飞盘策略教程（不重要，但如果你很好奇，那就是它）。

我希望用户能够选择一个主题，然后我将使用 jQuery 创建一个字段的移动图，但是现在，我正在尝试拥有多个 JavaScript 数组，并且当用户点击“下一步”按钮时", < p > 标签的 innerHTML 将变为该数组的一个元素。

但是，我希望能够只使用一个函数来循环遍历任何可能的指令数组。如果这有任何意义，我印象深刻。如果您确实知道我的意思并有任何想法，请告诉我。这是下面的代码。除了 currentNumber 或者更可能是 currentArray 之外，这一切都有效。

var basicManGuide = new Array();
basicManGuide[0] = "First, we will look at the handlers. The handlers are the two people who will typically have the disc.";
basicManGuide[1] = "Volvo";
basicManGuide[2] = "BMW";
var currentNum = 0;
document.getElementById("basicMan").onclick = function() {
    var currentArray = basicManGuide.slice();
    document.getElementById("menuStuff").style.display = "none";
    document.getElementById("buttons").style.display = "block";
    document.getElementById("players").style.display = "block";
    document.getElementById("description").innerHTML = currentArray[currentNum];
    ++currentNum;
}
document.getElementById("cancel").onclick = function() {
    document.getElementById("menuStuff").style.display = "inline";
    document.getElementById("buttons").style.display = "none";
    document.getElementById("players").style.display = "none";
}
document.getElementById("next").onclick = function() {
    document.getElementById("description").innerHTML = currentArray[currentNum];
    ++currentNum;
}

Answer 1

currentArray仅在 basicMan 的单击处理程序中（本地范围）。将该变量移到单击处理程序之外，以便将其作为全局变量提供给其他事件。

显然，还有其他领域需要解决，但这应该回答你的问题。（例如，当您没有将索引传递给切片时，为什么要切片数组？）

var basicManGuide = new Array();
basicManGuide[0] = "First, we will look at the handlers. The handlers are the two people who will typically have the disc.";
basicManGuide[1] = "Volvo";
basicManGuide[2] = "BMW";
var currentNum = 0;

var currentArray = basicManGuide.slice(); // <-- this was moved.

document.getElementById("basicMan").onclick = function() {
    document.getElementById("menuStuff").style.display = "none";
    document.getElementById("buttons").style.display = "block";
    document.getElementById("players").style.display = "block";
    document.getElementById("description").innerHTML = currentArray[currentNum];
    ++currentNum;
}
document.getElementById("cancel").onclick = function() {
    document.getElementById("menuStuff").style.display = "inline";
    document.getElementById("buttons").style.display = "none";
    document.getElementById("players").style.display = "none";
}
document.getElementById("next").onclick = function() {
    document.getElementById("description").innerHTML = currentArray[currentNum];
    ++currentNum;
}