将框的内部HTML设置为多个数组之一的元素

Set innerHTML of box to element of one of multiple arrays

本文关键字：数组 元素 内部 HTML 设置      更新时间：2023-09-26

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

我希望用户能够选择一个主题，然后我将使用 jQuery 创建一个字段的移动图，但现在，我正在尝试拥有多个 JavaScript 数组，当用户点击按钮"下一步"时，

标签的 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;
}

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;
}
相关文章：