Как мне обновить счетчик, когда я нажимаю кнопку? - PullRequest
Новая
       1

Как мне обновить счетчик, когда я нажимаю кнопку?

0 голосов
/ 17 июня 2019

Я сделал многошаговую форму с маркерами, которая будет обновляться при переходе к следующему набору полей, но не будет обновляться должным образом

HTML 

<div class="form-wrapper">
        <form method="POST" action="/character-match">
            <fieldset>
                <h2 class="title-xl">Jouw voorkeur</h2>
                <div class="toggle">
                   <label for="toggle" class="label title-m">Mijn match moet dezelfde aandoening hebben</label>
                   <input id="yes" type="radio" class="tab" name="a" value="yes">
                   <label class="label first" for="yes" class="radio-inline">Absoluut</label>
                   <input id="maybe" type="radio" class="tab" name="a" value="maybe">
                   <label class="label" for="maybe" class="radio-inline">Zou fijn zijn</label>
                   <input id="no" type="radio" class="tab" name="a" value="no">
                   <label class="label last" for="no" class="radio-inline">Nee</label>
                </div>

                <div class="toggle">
                   <label for="toggle" class="label title-m">Ik ben opzoek naar</label>
                   <input id="friendship" type="radio" class="tab" name="b" value="friendship">
                   <label class="label first" for="friendship" class="radio-inline">Vriendschap</label>
                   <input id="love" type="radio" class="tab" name="b" value="love">
                   <label class="label" for="love" class="radio-inline">Liefde</label>
                   <input id="both" type="radio" class="tab" name="b" value="both">
                   <label class="label last" for="both" class="radio-inline">Beide</label>
                </div>

                <div class="toggle">
                   <label for="toggle" class="label title-m">Mijn match moet in dezelfde stad wonen</label>
                   <input id="yes2" type="radio" class="tab" name="c" value="yes">
                   <label class="label first" for="yes2" class="radio-inline">Ja</label>
                   <input id="no2" type="radio" class="tab" name="c" value="no">
                   <label class="label last" for="no2" class="radio-inline">Nee</label>
                </div>

                <a href="#" class="hide" name="back" onclick="previousStep()">Terug</a href="#">
                <a href="#" class="hide" name="next" onclick="nextStep()">Verder</a href="#">
                <div class="bullet-container"></div>
            </fieldset>

            <fieldset>
                <h2 class="title-xl">Jouw karakter 1/2</h2>
                <div class="toggle">
                   <label for="toggle" class="label title-m">Ik ben</label>
                   <input id="introvert" type="radio" class="tab" name="d" value="introvert">
                   <label class="label first" for="introvert" class="radio-inline">Introvert</label>
                   <input id="inbetween" type="radio" class="tab" name="d" value="inbetween">
                   <label class="label" for="inbetween" class="radio-inline">Ertussen</label>
                   <input id="extrovert" type="radio" class="tab" name="d" value="extrovert">
                   <label class="label last" for="extrovert" class="radio-inline">Extrovert</label>
                </div>

                <div class="toggle">
                   <label for="toggle" class="label title-m">Ik ben</label>
                   <input id="shy" type="radio" class="tab" name="f" value="shy">
                   <label class="label first" for="shy" class="radio-inline">Verlegen</label>
                   <input id="not-shy" type="radio" class="tab" name="f" value="not-shy">
                   <label class="label last" for="not-shy" class="radio-inline">Niet verlegen</label>
                </div>

                <div class="toggle">
                   <label for="toggle" class="label title-m">Ik ben</label>
                   <input id="organised" type="radio" class="tab" name="g" value="organised">
                   <label class="label first" for="organised" class="radio-inline">Georganiseerd</label>
                   <input id="free" type="radio" class="tab" name="g" value="free">
                   <label class="label last" for="free" class="radio-inline">Vrij</label>
                </div>

                <a href="#" class="hide" name="back" onclick="previousStep()">Terug</a href="#">
                <a href="#" class="hide" name="next" onclick="nextStep()">Verder</a href="#">
                <div class="bullet-container"></div>
            </fieldset>

            <fieldset>
                <h2 class="title-xl">Jouw karakter 2/2</h2>
                <div class="toggle">
                   <label for="toggle" class="label title-m">Ik heb</label>
                   <input id="impatient" type="radio" class="tab" name="h" value="impatient">
                   <label class="label first" for="impatient" class="radio-inline">Veel geduld</label>
                   <input id="patient" type="radio" class="tab" name="h" value="patient">
                   <label class="label last" for="patient" class="radio-inline">Een kort lontje</label>
                </div>

                <div class="toggle">
                   <label for="toggle" class="label title-m">Ik ben</label>
                   <input id="clean" type="radio" class="tab" name="i" value="clean">
                   <label class="label first" for="clean" class="radio-inline">Opgeruimd</label>
                   <input id="dirty" type="radio" class="tab" name="i" value="dirty">
                   <label class="label last" for="dirty" class="radio-inline">Onopgeruimd</label>
                </div>

                <div class="toggle">
                   <label for="toggle" class="label title-m">Ik ben</label>
                   <input id="sporty" type="radio" class="tab" name="j" value="sporty">
                   <label class="label first" for="sporty" class="radio-inline">Sportief</label>
                   <input id="lazy" type="radio" class="tab" name="j" value="lazy">
                   <label class="label last" for="lazy" class="radio-inline">Niet sportief</label>
                </div>

                <a href="#" class="hide" name="back" onclick="previousStep()">Terug</a href="#">
                <a href="#" class="hide" name="next" onclick="nextStep()">Verder</a href="#">
                <input type="submit" name="submit" value="Match mij!" onclick="">
                <div class="bullet-container"></div>
            </fieldset>
        </form>
    </div>

JavaScript

Это просто ванильный javascript. Все работает, кроме обновления активной пули с bullet[formNumber].className += ' bullet-active' внизу кода 

    // Selecting every fieldset available
    const formPart = document.getElementsByTagName('fieldset')

    // Selecting every button available
    const buttons = document.getElementsByTagName('a')

    // Checking the active fieldset with formNumber
    let formNumber = 0
    let formPartActive = formPart[formNumber]
    formPartActive.className = 'show'

    // Checks the amount of fieldsets and duplicates the HTML string for the bullet as many times  as there are fieldsets
    let bulletNumber = "<div class='bullet'></div>"
    const formLength = formPart.length
    for (let i = 1; i < formLength; i++) {
      bulletNumber += "<div class='bullet'></div>"

      // Hide the fieldsets (formParts) if the Javascript is running
      formPart[i].className = 'hide'

      // Changes the hide class to show to display the buttons if the Javascript is running
      for (let x = 0; x < buttons.length; x++) {
        buttons[x].className = 'show'
      }
    }

    // Checks the amount of bulletContainers and injects the bullets necessery (see the loop above) into each one
    const bulletContainer = document.getElementsByClassName('bullet-container')
    for (let i = 0; i < bulletContainer.length; i++) {
      const bulletContainerCount = bulletContainer[i]
      bulletContainerCount.innerHTML = bulletNumber
    }

    // Removes the previous button on first fieldset and removes the next buton on the last fieldset
    document.getElementsByName('back')[0].className = 'hide'
    document.getElementsByName('next')[bulletContainer.length - 1].className = 'hide'

    // Makes the first dot active
    const bullet = document.getElementsByClassName('bullet')
    bullet[formNumber].className += ' bullet-active'

    // Function to go to the next fieldset (formPart) and change the bullet active to the next one
    function nextStep () {
      let fieldset = document.querySelectorAll('fieldset')[formNumber]

      // Hides the current fieldset and reveales the NEXT one with the class show
      fieldset.className = 'hide'
      formNumber = formNumber + 1
      fieldset = formPart[formNumber]
      fieldset.className = 'show'

      // Makes the next bullet active
      bullet[formNumber].className += ' bullet-active'
    }

    // Hides the current fieldset and reveales the PREVIOUS one with the class show
    function previousStep () {
      formPart[formNumber].className = 'hide'
      formNumber = formNumber - 1
      formPart[formNumber].className = 'show'
    };

Я ожидаю, что он обновится правильно, но следующий не получит класс с активным маркером

1 Ответ

0 голосов
/ 17 июня 2019

1) Я не вижу, где вы удаляете bullet-active из предыдущего элемента. попробуйте добавить приведенный ниже фрагмент, чтобы удалить текущий активный маркер перед установкой нового. 

document.querySelector('.bullet-active').classList.remove('bullet-active');

2) действительно ли bullet [formNumber] является следующим элементом? console.log и убедитесь, что это тот элемент, который вы ожидаете.

3) если вы открываете свои инструменты разработчика и вручную добавляете элемент bullet-active к элементу, он функционирует должным образом? если нет, то проблема может быть связана с вашим CSS, а не с JS.

примечание: я бы назвал const bullets не bullet, так как это список узлов, который я склонен к их множественному числу.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...