How to fix issue with “previous button” using JavaScript

Question

I am "emulating" a Gravity Form. I am using a previous button for my form. I know the best way to solve the problem is by 'telling' the function the id of the current div (display: block) but I don't know how.

In the first part of the code, I show or hide divs based on the selected option of the tag select, now, in the second one is where I configure the "previous button".

 <script>
            function yesnoCheck(that) {
            if (that.value == "2") {

            document.getElementById("b").style.display = "block";
            document.getElementById("a").style.display = "none";
            <?php $new="b" ?> 
            } else {
            document.getElementById("a").style.display = "none";
            document.getElementById("d").style.display = "block";
            }
            }
            </script>
               <script>
            function yesnoCheck2(that) {
            if (that.value != " ") {

            document.getElementById("c").style.display = "block";
            document.getElementById("a").style.display = "none";
            document.getElementById("b").style.display = "none";
            <?php $new="c" ?>
            } else {
            document.getElementById("a").style.display = "none";
            }
            }
            </script>
               <script>
            function yesnoCheck3(that) {
            if (that.value != " ") {

            document.getElementById("d").style.display = "block";
            document.getElementById("c").style.display = "none";
            <?php $new="f" ?>

            } else {
            document.getElementById("c").style.display = "none";
            }
            }
            </script>

             <script>
            function yesnoCheck4(that) {
            if (that.value.length == 8) {

            document.getElementById("tform").style.display = "block";

            } else {
            document.getElementById("tform").style.display = "none";
            }
            }
            </script>

Answer 1

It isn't entirely clear what you're trying to do, but what I think you're trying to do is navigate through a set of sections in a form as if they were different pages.

One really easy way to do this is to use the :target CSS selector, which allows you to select elements that match the ID of the current page's anchor fragment. For example, if I had a section with the ID of main , and the URL was something like https://example.com/#main , I could use section:target to show that section.

Here's a full example for you. HTML:

<section id="one">
  <h1>Section 1</h1>
  <p>
    This is section one.  Content goes here.
  </p>
  <a href="#two" class="button">Next</a>
</section>

<section id="two">
  <h1>Section 2</h1>
  <p>
    This is section two.  More content goes here.
  </p>
  <a href="#one" class="button">Previous</a>
  <a href="#three" class="button">Next</a>
</section>

<section id="three">
  <h1>Section 3</h1>
  <p>
    This is the last section.
  </p>
  <a href="#two" class="button">Previous</a>
</section>

CSS:

.button {
  background: #333;
  color: #fff;
  text-decoration: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
}

section {
  display: none;
}

section:target {
  display: block;
}

Finally, some JavaScript to initialize things:

// Default to the first section
if (!location.hash.substr(1)) {
  location.hash = 'one';
}

The buttons are just links to the next section, by way of anchor fragment.

This example is up on JSFiddle here: https://jsfiddle.net/91pnc3gf/