Why does my tab don't change when clicking the button?-CodePudding

I'm developing a new website, with a multi-step form where the steps are all in separated divs. The problem is: when i click in the first button, it shows the second page, but then it goes back to the first. Here's my javascript code:

<script>
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {
  // This function will display the specified tab of the form ...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
}

function next(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab"); 
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab   n;
  // if you have reached the end of the form... :
  if (currentTab >= x.length) {
    //...the form gets submitted:
    document.getElementById("regForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);

}

</script>

My html/php code for first two divs:

 <div >
    <div id="layout">
        <div >
            <div >
                <img src="pictures/propcomp.png"/>
            </div>   
            <div >
                <h3 >Olá!</h3> <br>
                <h3 >Seja bem vindo(a) à empresa número 1 na pesquisa Google nesse modelo de férias. Bem como já temos mais de 11.300 inscritos no nosso canal no YouTube.</h3>
                <h3 ><strong>Parabéns!</strong></h3>
                <h3 ><strong >Você foi pré-selecionado pelos nossos Analistas de Férias de Alto Padrão </strong> para
                    participar de uma consultoria <strong >gratuita e exclusiva</strong> de férias onde na mesma você
                    conhecerá um método de viajar mais e melhor com sua família. Contudo o seu
                    tempo para gente vale ouro, então vamos te presentear com um brinde para que
                    você participe da consultoria. Leia até o final se você quiser saber qual é o brinde!</h3> <br>
            </div>
            <div >
                <a href="">
                <button  type="button" id="nextBtn" onclick="next(1)">
                 <label >Beleza! Quero Participar!</label> 
                <img src="pictures/arrow.svg" />
                </button>
            </a>
            <div >
                <a href="" style="display: flex;"><img src="pictures/interrogacao.svg"/><h4 >Por que estou recebendo esse benefício?</h4></a> 
                
       </div>
            </div>
            <div >
                                 <img style="width:30px; height: 44.5px;"src="pictures/logopequeno.png"/>
                </div>
        </div>
    </div>
</div>

<div >
<div >
        <div >
            <div >
                <div >
                    <h3 >Uauuuuuuuu, você é demais!!</h3> 
                    <img src="pictures/sorriso.png"/>
                </div>
                <h3 >Te parabenizamos por priorizar suas férias e novas experiências. Aliás, tudo passa e o
                    que fica são os momentos que vivemos com as pessoas que amamos. Afinal, qual é
                    a história que você vai contar?</h3>
                <h3 >Para começar, qual é o seu nome?</h3>
            </div>
            <div >
              
                    <input  style="margin-left:32%;"type="text" id="nome" name="nome"><br>
                   
                    <div >
                    <a href="">
                    <button  type="button" id="nextBtn" onclick="next(1)">
                     <h3>Avançar</h3> 
                    <img src="pictures/arrow.svg" />
                    </button>
                </a>
                </div> 
        </div>
    </div>
</div>

I've put this online so you can see visually: https://testedeferias.000webhostapp.com/

CodePudding user response：

You are using anchor tab and so your page is getting refreshed. The page refreshes and so the first tab by default is visible again. Try removing the a tag here:

<a href="">
    <button  type="button" id="nextBtn" onclick="next(1)">
    <label >Beleza! Quero Participar!</label> 
    <img src="pictures/arrow.svg" />
    </button>
</a>

Expected:

<button  type="button" id="nextBtn" onclick="next(1)">
    <label >Beleza! Quero Participar!</label> 
    <img src="pictures/arrow.svg" />
</button>

CodePudding user response：

     <button  onclick="location.href='http://google.com';"> Google</button>