-1

I know that the <script> element can have function show(shown, hidden) on it. but with the 2 pages ({document.getElementById(shown).style.display='block'; document.getElementById(hidden).style.display='none'; return false;) in that, I can't figure out how to make that page count more. Any help?

P.S. I am open to almost anything. I can't guarantee your answers will help, but I might be able to figure it out using your suggestions.

I have tried more things on the function show(shown, hidden, hidden, hidden) but that does not help.

I am stuck. I have researched anything I could find. I can't figure it out.

Please help me.

My specific code I want suggestions on is this:

<script>
function show(shown, hidden) {
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  return false;
}
</script>

with some <div>s.

I know this is probably not helping you figure out how to help me, but I need to know. (I hate full-on JavaScript!)

CONNOR ROWDEN
  • 3
  • 1
  • 3

2 Answers2

0

I understand that you can use it with 2 pages but when you want to make more pages like 4-5 pages? First you need an clear function (it will hide all the pages) In the clear function get the body in dom and get all the childrens then make a foreach loop hiding all of them

Second you need an show function which will use the page as an parameter like "show('page1');" it will first call the clear function and then show the page1

Rayberk
  • 133
  • 1
  • 8
  • ??? I have only been working with HTML for about half a year. ??? – CONNOR ROWDEN Feb 21 '21 at 02:19
  • YOU, on the other hand, I have to say, this may make sense soon for me, but currently it does not help me at all, because I do not know what childrens are in this context, or a foreach loop, OR a "dom"! I have no clue what THOSE are. I do know what a clear function is, I just do'nt know how to make one. – CONNOR ROWDEN Feb 22 '21 at 23:06
  • Actually, I am DOING THAT ALREADY, that is how I learned (some) of my html! – CONNOR ROWDEN May 31 '21 at 12:54
0

<!doctype html>
<html lang="en">
<head>
  <title>Multi but Single Page</title>
  <meta charset="utf-8">
  <style>
      .templates {
          display: none;
      }
  </style>
  <script>
// we save all templates in an global Variable
var templateStack = [];

// https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
function getParameterByName(name, url) {
    url = url || window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

window.addEventListener('load', function (e) {
    // get all hidden template elements
    var templates = document.getElementsByClassName('templates');
    for (var i = 0, v; v = templates[i]; i++) {
        // each Child Node is a new Page
        for (var j = 0, x; x = v.childNodes[j]; j++) {
            // at least if it's an element
            if (x.nodeType === Node.ELEMENT_NODE) {
                templateStack.push(x);
            }
        }  
    }
    // uri support ?page=1 loads Page 2 and ?page=0 loads Page 1, default is 0
    var pageIndex = getParameterByName('page') || '0';
    // so we can test it with a Browser by just insert 'loadPage(1)'
    loadPage(pageIndex);
});

function loadPage(index) {
    // only valid indexes
    if (index >= templateStack.length || index < 0) {
        document.body.innerText = '404 Page not found';
        return;
    }
    // clean everything in our page
    document.body.innerHTML = '';
    // append our fetched Page out of our Global Variable
    document.body.appendChild(templateStack[index]);
}
  </script>
</head>
<body>
    <div class="templates">
        <div>
            <h3>Page 1</h3>
            <p>
                Welcome to Page 1
            </p>
            <a href="#" onclick="loadPage(1)">Load Page 2</a>
        </div>
        <div>
            <h1>Page 2</h1>
            <p>
                Our Page 2
            </p>
            <a href="#" onclick="loadPage(0)">Back to Page 1</a>
        </div>
    </div>
</body>
</html>
Scriptkiddy1337
  • 792
  • 4
  • 9