Вывод сообщения в html

Question

Помогите, пожалуйста, со следующим вопросом. Есть массив сообщений. Нужно в html сначала вывести первое сообщение из массива, а потом при нажатии на кнопку выводить следующее сообщение, а предыдущее скрывать. Как можно это реализовать? Только начинаю изучать js, поэтому строго не судите))

Answer 1

var arrayMessage = ['Сообщение номер 1', 'Сообщение номер 2', 'Сообщение номер 3'],
  numberMessage = 0;
const blockMessage = document.querySelector(".message");
blockMessage.innerHTML = arrayMessage[0];

function nextMessage() {
  numberMessage++;
  if (numberMessage >= arrayMessage.length) numberMessage = 0;
  blockMessage.innerHTML = arrayMessage[numberMessage];
}

function prevMessage() {
  numberMessage--;
  if (numberMessage < 0) numberMessage = arrayMessage.length - 1;
  blockMessage.innerHTML = arrayMessage[numberMessage];
}

body {
  margin: 0;
}

.block-message {
  position: sticky;
  width: 100%;
  min-height: 100vh;
  background-color: lightgray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block-message-inner {
  background-color: #fff;
  padding: 24px 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
}

.btn {
  padding: 12px 24px;
  border: 1px solid #000;
  cursor: pointer;
  transition: .25s;
}

.btn:hover {
  color: #fff;
  background-color: #000;
}

<div class="block-message">
  <div class="block-message-inner">
    <div>
      <h1 class="message"></h1>
    </div>
    <div>
      <button class="btn btn-prev" onclick="prevMessage()">Назад</button>
      <button class="btn btn-next" onclick="nextMessage()">Дальше</button>
    </div>
  </div>
</div>

Answer 2

В HTML (кнопка которая листает слайды вперед).

 <button class="next">Вперед</button>

В JavaScript

        // Массив с сообщениями
const arr = ['first Message', 'second Message', 'third Message'];
// Получаем кнопку
const next = document.querySelector('.next');
// Переменная (индекс элементов массива) со значением 0 (первый элемент массива)
let indexMessage = 0;
// Получаем элемент для вывода сообщений
const slide = document.querySelector('.slide');
// и выводим первое сообщение
slide.innerHTML = arr[indexMessage];


// На кнопку (навешивается обработчик событий) при клике
next.addEventListener('click', function () {
  // после вывода индекс элемента массива увеличивается на единицу (+1)
  indexMessage++;
  // в элемент slide, выводится элемент массива с индексом (indexMessage)
  slide.innerHTML = arr[indexMessage];
  // (Условие) Когда "индекс элемента массива" станет равным длине массива
  // indexMessage = -1  (что бы начать показ с первого элемента, так выше indexMessage++) и все повторяется
  if (indexMessage == arr.length - 1) {
    indexMessage = -1;
  }

});

БЛОГ НА HUSL

Вывод сообщения в html

Ответы (2 шт):