How do i get my back (function) button to work? JS-CodePudding

how do I get my back button to work normally? I want to have every nav item to appear after clicking the back button. The point is that I need to make a nav bar like this. But not great at javascript. so would love to get some help with this.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>js test</title>
</head>
<body>



   <div >

        <div>
            <button id="btn1"  onclick="toggleBtn()">
                back
            </button>
        </div>

    <ul >
        <li>
            <a id="navHome"   onclick="toggleHome()"  href="#"> Home </a>
        </li>
        <li>
            <a id="navBlog"  onclick="toggleBlog()" href="#">Blog</a>
        </li>
        <li>
            <a id="navEten"  onclick="toggleEten()" href="#">Eten</a>
        </li>
        <li>
            <a id="navThuis"  onclick="toggleThuis()" href="#">Thuis</a>
        </li>
    </ul>
</div>

<div >
    <h1 > hoe kan ik de terug button netjes hebben? ik wil wanneer ik op terug klik dat alle linkjes terug komt. dus Home, Blog, Eten, Thuis. <br> Want op dit moment werkt het alleen goed als je twee keer op iets drukt. <br> Bijvoorbeeld twee keer op home of twee keer op blog </h1>
</div>




</body>
<script src="main.js"></script>
</html>

function toggleHome() {

  document.getElementById("btn1").classList.toggle("btn");
 
  document.getElementById("btn1").classList.toggle("btnOnClick");

  document.getElementById("navBlog").classList.toggle("btn");
  document.getElementById("navEten").classList.toggle("btn");
  document.getElementById("navThuis").classList.toggle("btn");

 
 }

 function toggleBlog() {

  document.getElementById("btn1").classList.toggle("btn");
 
  document.getElementById("btn1").classList.toggle("btnOnClick");

  document.getElementById("navHome").classList.toggle("btn");
  document.getElementById("navEten").classList.toggle("btn");
  document.getElementById("navThuis").classList.toggle("btn");
 
 }

 function toggleEten() {
  document.getElementById("btn1").classList.toggle("btn");
 
  document.getElementById("btn1").classList.toggle("btnOnClick");

  document.getElementById("navHome").classList.toggle("btn");
  document.getElementById("navBlog").classList.toggle("btn");
  document.getElementById("navThuis").classList.toggle("btn");
 
 }

 function toggleThuis() {
  document.getElementById("btn1").classList.toggle("btn");
 
  document.getElementById("btn1").classList.toggle("btnOnClick");

  document.getElementById("navHome").classList.toggle("btn");
  document.getElementById("navEten").classList.toggle("btn");
  document.getElementById("navBlog").classList.toggle("btn");
 
 }


 function toggleBtn() {

  document.getElementById("btn1").classList.toggle("btn");
 
  document.getElementById("btn1").classList.toggle("btnOnClick");

  document.getElementById("navHome").classList.toggle("link");
  document.getElementById("navBlog").classList.toggle("link");
  document.getElementById("navEten").classList.toggle("link");
  document.getElementById("navThuis").classList.toggle("link");

 
 }

CSS

*{
  background-color: rgb(0, 0, 0);
}

.container{
  border: 5px solid white;
  background-size: contain;
  width: 100%;
  justify-content: center;
  display: flex;
}

.container1{
  
  background-size: contain;
  width: 100%;
  justify-content: center;
  display: flex;
}

a:link {
  text-decoration: none;
}

a{
  color: white;
}

.link{
  color: white;
}

a:hover{
  color: aqua;
}

ul{
  list-style: none;
}

.btn{
  color: transparent;
  background-color: transparent;
  border: 0px transparent;
  position: fixed;

  display: none;
}


.btnOnClick{
  color: white;
  background-color: transparent;
  border: 0px;
  position: relative;
}

nav{
  background-color: red;
}

Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. Text filler. For some reason I had to do this or I wasn't able to post this insert at all. I am sorry.

CodePudding user response：

So I took a look at your code, but it is a bit redundant and therefore hard to manage. So I changed it a bit and managed to achieve your goal. Look at the code snippet below:

<!DOCTYPE html>
<head>
    <style>
*{
  background-color: rgb(0, 0, 0);
}

.container{
  border: 5px solid white;
  background-size: contain;
  width: 100%;
  justify-content: center;
  display: flex;
}

a:link {
  text-decoration: none;
}

a{
  color: white;
}

.link{
  color: white;
}

a:hover{
  color: aqua;
}

ul{
  list-style: none;
}

.btnOnClick{
  color: white;
  background-color: transparent;
  border: 0px;
  position: relative;
}
    </style>
</head>
<body>
  <div >

  <div id="button-wrapper"></div>

  <div id="nav-wrapper">
    <ul >
        <li>
            <a id="navHome"   name="Home" onclick="toggle(this.id, this.name)"  href="#"> Home </a>
        </li>
        <li>
            <a id="navBlog"  name="Blog" onclick="toggle(this.id, this.name)" href="#">Blog</a>
        </li>
        <li>
            <a id="navEten"  name="Eten" onclick="toggle(this.id, this.name)" href="#">Eten</a>
        </li>
        <li>
            <a id="navThuis"  name="Thuis" onclick="toggle(this.id, this.name)" href="#">Thuis</a>
        </li>
    </ul>
  </div>
</div>

  <script>

    function toggle(id, name) {
      const navWrapper = document.getElementById("nav-wrapper");
      navWrapper.innerHTML = `<ul ><li><a id="${id}"  name="${name}" onclick="reverseToggle(this.id, this.name)" href="#">${name}</a></li></ul>`;

      const buttonWrapper = document.getElementById("button-wrapper");
      buttonWrapper.innerHTML = `<button type="button"  onclick="reverseToggle()">Back</button>`
    }

    function reverseToggle() {
      const navWrapper = document.getElementById("nav-wrapper");

      navWrapper.innerHTML = `<ul >
        <li>
            <a id="navHome"   name="Home" onclick="toggle(this.id, this.name)"  href="#"> Home </a>
        </li>
        <li>
            <a id="navBlog"  name="Blog" onclick="toggle(this.id, this.name)" href="#">Blog</a>
        </li>
        <li>
            <a id="navEten"  name="Eten" onclick="toggle(this.id, this.name)" href="#">Eten</a>
        </li>
        <li>
            <a id="navThuis"  name="Thuis" onclick="toggle(this.id, this.name)" href="#">Thuis</a>
        </li>
    </ul>`;

    const buttonWrapper = document.getElementById("button-wrapper");
      buttonWrapper.innerHTML = ""
    }
  </script>
</body>
</html>

I added a new toggle function that takes in 2 parameters that are used to generate a new list item dynamically. Each will contain a onclick event listener with a new reverseToggle function, which brings back the original content. When the first "toggle" function is clicked the button will also appear, and the button has an event listener that is linked to the reverseToggle function too. I'm sure there still is a better way to achieve this, but this works and the code is already much cleaner.