Document.referrer (I need help :( )

Pleas help me,
I’ve been stuck on this one for quite some time now, looking through the internet but I can’t figure out what’s wrong…

I’ve created two page, one page has a link to the other and if one would go directly to the 2nd page without visiting the first, he/she should be redirected to the first page…

(both pages are stored on my laptop)

FIRST PAGE:

<!DOCTYPE html>
<html lang="nl">
<head>
    <title>Document</title>
</head>
<body>
   < a href="oefKwis.html">Start de kwis</a>
</body>
</html>

2nd PAGE:

<!DOCTYPE html>
<html lang="nl">
<head>
    <title>Oef Kwis</title>
    <style>
        .juist {
            color : black;
            font-style : italic;
        }
        .fout{
            color : red;
            font-style : italic;
        }
    </style>
    <script>
        var aantalJuist = 0;
        var juist = "   goed";
        var fout = "    fout";
        
        window.onload = function(){
            var x = document.referrer
             if (x === "file:///Users/stoffel/Desktop/browser/oefStartKwis.html"){
                        console.log("hallo")
                        document.getElementById("controleer").onclick = controleerAntwoord;
                        setTimeout(tijdVerstreken, 10000);
                        
            } else {
            console.log("toch niet")
            location.replace("file:///Users/stoffel/Desktop/browser/oefStartKwis.html");
            }
        }

        function controleerAntwoord(){
            if (frmPara.paragraaf[1].checked){
                aantalJuist++;                                                 
                paragraaf.className = juist;
                paragraaf.innerHTML = juist;   
            } else {
                paragraaf.className = fout;
                paragraaf.innerHTML = fout;
            }
            if (frmVlag.vlag[2].checked){
                aantalJuist++;
                vlag.className = juist;
                vlag.innerHTML = juist;
            } else {
                vlag.className = fout;
                vlag.innerHTML = fout;
            }
            if (frmPriem.priem[2].checked){
                aantalJuist++;
                priem.className = juist;
                priem.innerHTML = juist;
            } else {
                priem.className = fout
                priem.innerHTML = fout;
            }
            alert("Aantal juist antwoorden: "+ aantalJuist);
            aantalJuist = 0;
        }

       function tijdVerstreken(){
            alert("Uw tijd is verstreken");
            document.getElementById("controleer").disabled = true;
            controleerAntwoord();
            }
        
       
    </script>
</head>
body>
    <h1>Met welke tag duiden we een paragraaf aan?<span id="paragraaf"></span></h1>
    <form name="frmPara">
        <label><input type="radio" name="paragraaf">  h1</label><br>
        <label><input type="radio" name="paragraaf">  p</label><br>
        <label><input type="radio" name="paragraaf">  a</label><br>
        <label><input type="radio" name="paragraaf">  div</label>
        <br><br>
    </form>
    <h1>Wat is de juiste kleuren combinatie van de Belgische vlag?<span id="vlag"></span></h1>
    <form name="frmVlag">
        <label><input type="radio" name="vlag">  Zwart Rood Geel</label><br>
        <label><input type="radio" name="vlag">  Geel Zwart Rood</label><br>
        <label><input type="radio" name="vlag">  Rood Geel Zwart</label><br>
        <label><input type="radio" name="vlag">  Zwart Geel Rood</label>
        <br><br>
    </form>
    <h1>Welk getal is een 'priemgetal'?<span id="priem"></span></h1>
    <form name="frmPriem">
        <label>input type="radio" name="priem">  14</label><br>
        <label>input type="radio" name="priem">  3248</label><br>
        <label>input type="radio" name="priem">  17</label><br>
        <label>input type="radio" name="priem">  84</label>
        <br><br>
        <input type="button" id="controleer" name="controleerBtn" value="Controleer">
    </form>
</body>
</html>

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

Could you describe what the problem is?

1 Like

thx!

When I first posted it I lost half of my code so I started deleting all my opening tags :smile:
I figured everybody would understand what I was trying to show, hehe.

The problem is that if I open the first page and then click on the link which will take me to the second page “document.referrer” still show undefined.
The purpose of this exercise was to create two pages. If you went to the first page you needed to click on a link to go to the second. If you tried going directly to the second you have to be redirected to the first where you can then click on the link to go to the second…

I’ve tried several things but either I could go to the first and then click on the link to go to the second, but if I tried going to the second page directly it also worked, I wasn’t redirected.
The way the code is now, if try to go to the second page directly I’m redirected to the first but everytime I click on the link I’m redirected to the first page again so I can’t open the 2nd page…

So, the way that I think this works is document.referrer is set to whatever the Referrer header is set to. Because you’re not using http, no header gets set at all. So, this would never work in the filesystem. I can’t find any documentation on that, but it makes sense. Is this something you actually need to put online, or just a personal experiment?

I actually was thinking exactly the same thing :slight_smile:

I just started doing a six month course front end development and this was one of our exercises.

We had to make the second page but then as an extra (if we wanted to) we had the first page with a link on it and we had to make sure you would be redirected to the first page if you would try to skip the first page. (as a tip she mentioned ‘referrer’ but it was something we hadn’t seen yet)
Since we were given the assignment I thought there should be a way to make it work but I guess indeed there isn’t.
I’ve now been loosing so much time on something that wasn’t possible in the first place :smiley:

I see. Using document.referrer would work if you got the pages up on a server, but there are other ways you could do this. localstorage is really easy to use and you can set a flag. Front end libraries like Angular and React offer powerful routing features, but then we’re in single-page app territory and you’re technically not “going” anywhere.

Thx,

I will keep it in mind, but I think for now that was not what we were supposed to do.
We will start using Angular later on I think, React I don’t think so.