使用单个按钮多次更改文本并隐藏最后一个文本的按钮答案

【问题标题】：change text multiple times with a single button and hide the button for the last text使用单个按钮多次更改文本并隐藏最后一个文本的按钮
【发布时间】：2020-03-15 00:52:47
【问题描述】：

我想写一个基本的故事，你只需点击下一步，文本就会改变。

我可以更改文字，但我不知道如何隐藏按钮。基本上我希望onclick 方法执行多个功能，但不是同时执行，而是按顺序执行

代码如下。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="div1">
      <p id="txt" class="txt1">OK, here wo go.</p>
    </div>
    <button id="btn_next" type="button">Next</button>
    <script>
      document.getElementById("btn_next").addEventListener("click", toggleText);
      function toggleText() {
        var textBox = document.getElementById("txt");
        switch (textBox.className) {
          case "txt1": {
            textBox.innerHTML = "This is text 1";
            swapClasses(textBox, "txt2");
            break;
          }
          case "txt2": {
            textBox.innerHTML = "This is text 2";
            break;
          }
        }
      }
      function swapClasses(elem, targetClass) {
        elem.className = targetClass;
      }
    </script>
  </body>
</html>

【问题讨论】：

在发布此问题之前，我已经通过多种方式提出了这个问题，但找不到答案。

标签： javascript button event-handling hide dom-events

【解决方案1】：

如果您想在<p> 类为txt2 时隐藏按钮，这意味着显示最后一个文本，一个简单的方法是：

case "txt2": {
        textBox.innerHTML = "This is text 2"
        document.getElementById("btn_next").style.display = "none";

        break;
}

您还可以将按钮元素存储到变量const btnEl = document.getElementById("btn_next")，这样您就不会得到两次。

【讨论】：

非常感谢，这行得通。这是否意味着我可以在这种情况下进行其他更改？例如显示一个列表或附加一个孩子？

【解决方案2】：

您可以通过将元素的显示设置为无来隐藏元素，例如： `nextBtn.style.display = 'none';

但是，您可以使用一组文本值来驱动您的故事，而不是使用 switch 语句，就像在下一个答案中一样

【讨论】：

【解决方案3】：

另一种方法如下所示。

let counter = 0;
const displayed_text = [
  'Input text 1',
  'Input text 2',
  'Input text 3',
  'Input text 4',
];

// Assign DOM elements to variables
const btn_next =  document.getElementById("btn_next");
const text_display = document.getElementById("txt");

// Attach listener to button    
btn_next.addEventListener("click", toggleText); 

function toggleText() {
  counter += 1;

  if (counter <= displayed_text.length) {
    // Update displayed text
    text_display.innerHTML = displayed_text[counter -1];
  }

  if (counter === displayed_text.length) {
    // Hide button
    btn_next.style.display = 'none';
  }
}

这种方法的主要优点是，如果您愿意，可以更轻松地返回多个步骤。

【讨论】：

【解决方案4】：

    var story = [
        'OK, here wo go.',
        'This is text 1',
        'This is text 2',
        'This is text 3',
        'This is text 4'
    ];
    var nextBtn = document.getElementById("btn_next");
    function changeText() {
        var textBox = document.getElementById("txt");
        var chapter = Number(textBox.dataset.chapter);
        if (chapter < story.length - 1) {
            textBox.dataset.chapter = chapter + 1;
            textBox.innerHTML = story[chapter + 1];

            if ((story.length - chapter) <= 2 ) {
                nextBtn.style.display = 'none';
            }
        }
    }

    nextBtn.addEventListener("click", changeText);

<div id="div1">
    <p id="txt" class="txt1" data-chapter="0">OK, here wo go.</p>
</div>
<button id="btn_next" type="button">Next</button>

【讨论】：

【解决方案5】：

对于这种情况，将内容存储在对象数组中（或以 JSON 等格式获取内容）可能会有所帮助。然后，当事件处理程序被触发时，它可以简单地递增（或者如果您希望向前/向后递减）并确定按钮应该是可见的还是隐藏的。这似乎是您使用上述代码的方向。

示例函数：

function navigatePage(el){
  // Control the navigation by only allowing increment within range
  if (el != null){
    switch (el.target.getAttribute("id")){
      case "btn_next":
        if (curr_page < story.length){
          curr_page++;
        }
        break;
      case "btn_prev":
        if (curr_page > 1){
          curr_page--;
        }
        break;
      default: break;
    }
  }

  // Set the title and text to the current page contents
  // Arrays are zero-indexed, so "1" is actually "0", and so on
  story_title.innerHTML = story[curr_page - 1].title;
  story_content.innerHTML = story[curr_page - 1].text;

  // Show or hide nav buttons based on the current page
  // The following syntax is basically just a fancy "if-then" done in one line
  btn_prev.style.display = (curr_page > 1 ? "inline-block" : "none");
  btn_next.style.display = (curr_page < story.length ? "inline-block" : "none");

  // Update the page count element
  page_count.innerHTML = "Page " + curr_page + " of " + story.length;
//  document.getElementById("storycontent").innerHTML = curr_page + " - " + story.length;
}

这里有一个工作小提琴来演示它是如何协同工作的： https://jsfiddle.net/s0toz3L8/1/

【讨论】：