Событие нажатия одной кнопки для трех страниц

У меня одностраничный веб-сайт с тремя формами. В первой форме класс активен, а остальные скрыты. Все формы имеют кнопки с одинаковым классом .all-pages. Когда я нажимаю кнопку «Далее», я хочу, чтобы первая страница была скрыта, а вторая стала активной. Когда я нахожусь во второй форме, нажимаю ТОЛЬКО кнопку ДАЛЕЕ. Я хочу, чтобы вторая страница скрывала класс, а третья страница стала активной. Пожалуйста, помогите мне :) И, пожалуйста, просто JavaScript.

У меня есть 3 такие формы:

<div class = "container-fluid"> <!-- first page container -->
    <div class = "row">
      <div class = "col-lg-5 col-lg-offset-3">
        <form class = "well margin-form-top form-color-bg page1">

          <div class = "row"> <!-- webpage name -->
            <div class = "col-lg-4 col-lg-offset-4">
              <h2>Book a Room</h2>
            </div>
          </div>

          <div class = "row"> <!-- information about webpage -->
            <div class = "col-lg-7 col-lg-offset-2 h4">
              <p>This information will let us know more about you.</p>
            </div>
          </div>
          
          <div class = "row"> <!-- navigation -->
            <div class = "col-lg-12 button-padding-zero">
              <ul class = "nav nav-pills nav-justified btn-group">
                <button type = "button" class = "btn btn-danger btn-default btn-lg button-width navigation-font-size border-r grey-bg all-pages red active" data-page = "0">
                  <b>ACCOUT</b>
                </button>
                <button type = "button" class = "btn btn-default btn-default btn-lg button-width navigation-font-size border-l-r grey-bg all-pages red" data-page = "1">
                  <b>ROOM TYPE</b>
                </button>
                <button type = "button" class = "btn btn-default btn-default btn-lg button-width navigation-font-size border-l grey-bg all-pages red" data-page = "2">
                  <b>EXTRA DETAILS</b>
                </button>
              </ul>
            </div>
          </div>
          <br>

          <div class = "row"> <!-- let's start -->
            <div class = "col-lg-5 col-lg-offset-4 h4">
              <p>Let's start with the basic details.</p>
            </div>
          </div>
          <br>
          <div class = "row"> <!-- first row email and country -->
            <div class = "col-lg-5 col-lg-offset-0">
              <div class = "input-group">
              <input type = "email" class = "input-sm btn input-width text-left" placeholder = "Your Email">
              </div>
            </div>

            <div class = "col-lg-6 col-lg-offset-1 button-padding-zero">
              <select class = "form-control input-sm btn input-width">
                <option value = "" selected>Country</option>
                <option>Serbia</option>
                <option>Russia</option>
                <option>Brazil</option>
              </select>
            </div>
          </div>
          <br>
          <div class = "row"> <!-- 2nd row password and budget -->
            <div class = "col-lg-5 col-lg-offset-0">
              <div class = "input-group">
              <input type = "password" class = "input-sm btn input-width text-left" placeholder = "Your Password">
              </div>
            </div>

            <div class = "col-lg-6 col-lg-offset-1 button-padding-zero">
              <select class = "form-control input-sm btn input-width">
                <option value = "" selected>Daily Budget</option>
                <option>100$</option>
                <option>200$</option>
                <option>300$</option>
              </select>
            </div>
          </div>
          <br>
          <br>
          <br>
          <div class = "row">
           <div class = "col-lg-3 col-lg-offset-9">
             <button type = "button" id = "next-button" class = "btn btn-default btn-danger btn-lg button-next-width all-pages" data-page = "0">NEXT</button>
           </div> 
          </div>
            
          </div>

        </form>
      </div>
    </div>
  </div>

var page1 = document.querySelector('.page1');
var page2 = document.querySelector('.page2');
var page3 = document.querySelector('.page3');
var emptyArrey = [];
var nextButtons = document.querySelectorAll('.all-pages');
  function nextFunction(event) {
    // debugger;
    var allButtons = document.querySelectorAll('.all-pages');
    for (var i = 0; i < allButtons.length; i++) {
      var oneButton = allButtons[i].dataset.page;
      if (allButtons[i].dataset.page === '0') {
        page1.classList.add('hidden');
        page2.classList.remove('hidden');
        return;
        debugger;
      } else {
        page2.classList.add('hidden');
        page3.classList.remove('hidden');
        }
      }
        
    }
   
for (var nextButton of nextButtons){
    nextButton.addEventListener('click', nextFunction);
}

Как насчет публикации ВСЕГО соответствующего кода? Вы говорите о 3 формах и 3 кнопках, но вы разместили только один div с одним button.

— 26.03.2018 23:49

Буду редактировать. Благодарность

— 27.03.2018 00:24

javascript dom-events mouseclick-event

26.03.2018 23:42

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 2

Вы можете использовать атрибут кнопки страница данных, чтобы отслеживать, в какой форме вы сейчас находитесь, а затем отображать соответствующую форму.

// give your button the id "next-button"
var currentPage = document.getElementByID("next-button").getAttribute("data-page");

Как только вы узнаете, в какой форме вы находитесь, вы можете при необходимости скрыть остальные.

26.03.2018 23:59

Если я понял ваш вопрос, вот возможное решение.

const nextButtons = document.querySelectorAll('.all-pages');
const pages = document.querySelectorAll('.page');

nextButtons.forEach(btn => {
	btn.addEventListener('click', () => {
		pages.forEach(page => {
			page.hidden = true;
		});
		const pageActive = document.querySelector(`.page-${btn.dataset.page}`);
		pageActive.hidden = false;
	})
})

<div class = "page page-1">
	<button class = "all-pages" data-page = "2">NEXT 2</button>
</div>
<div class = "page page-2"  hidden=true>
	<button class = "all-pages" data-page = "3">NEXT 3</button>
</div>
<div class = "page page-3"  hidden=true>
	<button class = "all-pages" data-page = "1">NEXT 1</button>
</div>

27.03.2018 00:01

Другие вопросы по теме

Слушатель событий для значения команды

Событие HTML DOM для Iframe с ответом 204

События обработки для элементов имеют preventDefault, stopPropagation или return false

Как вызвать событие 'beforeunload' из IFRAME

Как запускать события при падении с помощью Dragula при падении?

Добавление eventListener к нескольким элементам при использовании атрибута из дочернего элемента

Как добавлять элементы в бесконечную прокрутку, не блокируя анимацию прокрутки

Слушатель Realex

Как использовать функцию Javascript event preventDefault () внутри функции?

Исключить элементы для события focusout

Событие нажатия одной кнопки для трех страниц

Ответы 2

Другие вопросы по теме

Похожие вопросы