初学者 Javascript - 使用数组更改文本 - 我能否在点击时将数组重置为列表的开头，或者在显示特定文本时执行特定操作

Question

我正在构建一些代码，这些代码允许我在单击按钮时更改模态框的文本，以构成交互式教程的一部分。到目前为止，我已经成功地创建了我的数组并使用按钮来回移动了一个步骤。但是，我运行遇到了 2 个我无法理解的用例

我想确定当弹出窗口为 opened/closed 时，它在 array/index 中默认返回 0，以便在显示时始终位于第一步
如果显示某些文本，我希望允许发生特定的事情，主要是显示和隐藏元素，所以没有什么复杂的

Javascript 对我来说是一门较新的语言，我完全是自学的，所以我肯定有一些不好的做法和知识上的差距。我认为这就像 if Array == Array[]，但到目前为止我无法让它工作。以下是 Html 和 Javascript 文件的相关摘录，以了解我前进的方向，希望有人可以建议如何实施这些更改！

var step = ['step 1',
  'step 2',
  'step 3',
  'step 4',
  'step 5',
  'step 6',
  'step 7',
  'step 8',
  'step 9',
  'step 10',
  'step 11',
  'step 12',
  'step 13'
];
var nextBtn = document.getElementById("btn_next");
var btn = document.getElementById("help");
var textBox;

function changeText() {
  textBox = document.getElementById("txt");
  var chapter = Number(textBox.dataset.chapter);
  if (chapter < step.length - 1) {
    textBox.dataset.chapter = chapter + 1;
    textBox.innerHTML = step[chapter + 1];

    if ((step.length - chapter) <= 2) {
      nextBtn.style.display = 'none';
    }
  }
  console.log(step.length - chapter);
}
nextBtn.addEventListener("click", changeText);

var prevBtn = document.getElementById("btn_prev");

function changeTextBack() {
  var textBoxBack = document.getElementById("txt");
  var chapter = Number(textBoxBack.dataset.chapter);
  if (chapter < step.length - 1) {
    textBoxBack.dataset.chapter = chapter - 1;
    textBoxBack.innerHTML = step[chapter - 1];

    if ((step.length + chapter) == 14) {
      prevBtn.style.display = 'none';
      if ((step.length + chapter) != 14) {
        prevBtn.style.display = 'block';
      }
    }
  }
}
prevBtn.addEventListener("click", changeTextBack);

btn.onclick = function() {
  modal.style.display = "block";
  warn.style.display = "none";
}

<button class="help" id="help"> ? </button>
<div class="alert" id="myModal">
  <div id="div1">
    <button class="close"> x </button>

    <p id="txt" data-chapter="0"> Welcome to the workspace! This is where you’ll build, edit and customise your unique trading strategies. Follow along to get your first bot built in no time!</p>
  </div>

  <button id="btn_prev" type="button" class="previousBtn"> Previous Step</button>
  <button id="btn_next" type="button" class="nextButton">Next Step </button>
</div>

Answer 1

我建议对您的代码进行以下重构：

使用const/let代替var来声明变量。
使用变量来跟踪当前索引。
只使用一个函数来改变步骤，因为你提供的两个函数几乎是一样的。

然后您会发现您可以随时使用 currentIndex 变量进行重置。

const step = [
  'step 1',
  'step 2',
  'step 3',
  'step 4',
  'step 5',
  'step 6',
  'step 7',
  'step 8',
  'step 9',
  'step 10',
  'step 11',
  'step 12',
  'step 13'
];

const nextBtn = document.getElementById("btn_next");
const prevBtn = document.getElementById("btn_prev");
const textBox = document.getElementById("txt");

let currentIndex = 0

function next(str) {
  if(str === 'back' && currentIndex > 0) {
    currentIndex--
  }

  if(str === 'forth' && currentIndex < 12) {
    currentIndex++
  }

  textBox.innerHTML = step[currentIndex]
}

nextBtn.onclick = function() { next("forth") }
prevBtn.onclick = function() { next("back") }

function AnotherFunc() {
  // do something like remove modal (modal.style.display = "none")
  // reset currentIndex to 0 (currentIndex = 0)
}

初学者 Javascript - 使用数组更改文本 - 我能否在点击时将数组重置为列表的开头，或者在显示特定文本时执行特定操作

Beginner Javascript - Using array to change text - can I reset array to start of list on click, or perform specific actions when certain text shows

html

javascript

arrays

arraylist