изменить текст несколько раз с помощью одной кнопки и скрыть кнопку для последнего текста - PullRequest
Новая
       35

изменить текст несколько раз с помощью одной кнопки и скрыть кнопку для последнего текста

0 голосов
/ 15 марта 2020

Я хочу написать основную c историю, в которой вы просто нажимаете «Далее», и текст меняется.

Я могу изменить текст, но я не знаю как скрыть кнопку . По сути, я хочу, чтобы метод 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>

Ответы [ 5 ]

0 голосов
/ 15 марта 2020

В подобных случаях может быть полезно сохранить содержимое в массиве объектов (или извлечь содержимое как JSON et c). Затем, когда обработчик события запускается, он может просто увеличивать (или уменьшать, если вы хотите sh иметь вперед / назад) и определять, должна ли кнопка быть видимой или скрытой. Похоже, это направление, в котором вы движетесь с приведенным выше кодом.

Пример функции: 

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/

0 голосов
/ 15 марта 2020 

    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>
0 голосов
/ 15 марта 2020

Вы можете скрыть элемент, установив для его отображения значение none, например: `nextBtn.style.display = 'none';

Однако вместо оператора switch вы можете использовать массив текстовых значений вести свою историю как в следующем ответе

0 голосов
/ 15 марта 2020

Другой подход к этому показан ниже. 

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

Основным преимуществом этого подхода является то, что он облегчает go возврат на несколько шагов, если вы хотите.

0 голосов
/ 15 марта 2020

Если вы хотите скрыть кнопку, когда класс <p> равен txt2, что означает, что отображается последний текст, простой способ сделать это будет следующим: 

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

        break;
}

Вы можете также сохраните элемент кнопки в переменной const btnEl = document.getElementById("btn_next"), чтобы вы не получили его дважды.

...