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

Question

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

我可以更改文本，但我不知道如何隐藏按钮。基本上我希望 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>

Answer 1

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

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

        break;
}

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

Answer 2

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

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

Answer 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';
  }
}

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

Answer 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>

Answer 5

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

示例函数：

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

这是一个有效的 fiddle 来演示它们是如何协同工作的： https://jsfiddle.net/s0toz3L8/1/

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

change text multiple times with a single button and hide the button for the last text

javascript

button

event-handling

hide

dom-events