I'm building some code that allows me to change the text of a Modal when buttons are clicked, to form part of an interactive tutorial. So far I've had success creating my array and going back and forth a step using buttons. However, I've run into 2 use cases I can't figure out

1. I'd like to make sure when the pop up is opened/closed, it defaults back to 0 in the array/index so that when shown it's always on the first step

2. I'd like to allow specific things to happen if certain text is displayed, mostly showing and hiding elements so nothing complex

Javascript is a newer language to me and I'm entirely self-taught so I definitely have some bad practices and gaps in my knowledge. I think it is like if Array == Array[], but I can't get it to work so far. Here are the relevant excerpts of the Html and Javascript files to see the direction I'm going, hopefully someone can suggest how to implement either of these changes!

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  id="help"> ? </button>
<div  id="myModal">
  <div id="div1">
    <button > 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" > Previous Step</button>
  <button id="btn_next" type="button" >Next Step </button>
</div>

CodePudding user response：

I would recommend the following refactorings to your code:

1. use const/let instead of var to declare variables.

2. using a variable to keep track of the current index.

3. using only one function to change the step, since both functions you provide are almost the same.

then you'll see you can use the currentIndex variable to reset whenever you want.

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)
}