variable in javascript not showing on html page using innerHTML

Question

I have a form with radio buttons and when you click on submit it calculates your score (js variable). I want to display the scores on another page (profiel page). I tried using innerHTML but it didn't show up and I get this error: Uncaught TypeError: Cannot set property 'innerHTML' of null. I looked it up and found out that the innerhtml has to be in a onload function. So tried that also, but it didn't work either. Is there maybe another way to do this? Or is there something in my code that isn't right? Thank you in advance!

Here's my code: quiz page:(ignore all the questions) I call the javascript function in submit button element.

<div class="content">
  <div id="quiz_form">

        <form action="<?php echo site_url("Home/profiel"); ?>"  method="post" name="quizform">
         Maak de volgende Quiz om je persoonlijkheidstype te bepalen:
</br>
<h2>Quiz</h2>
<p>Extrovert (E) versus Introvert (I)</p>
<!--totaal:50%-->
<p>Vraag 1:</p>
<input type="radio" id="e" name="E1" value="10." checked="checked">a) Ik geef de voorkeur aan grote groepen mensen, met een grote diversiteit.<br>
<input type="radio" name="E1" value="-10">b) Ik geef de voorkeur aan intieme bijeenkomsten met uitsluitend goede vrienden.<br>
<input type="radio" name="E1" value="000">c) Ik zit er eigenlijk tussenin.

<p>Vraag 2:</p>
<input type="radio" name="E2" value="10." checked="checked">a) Ik doe eerst, en dan denk ik.<br>
<input type="radio" name="E2" value="-10">b) Ik denk eerst, en dan doe ik.<br>
<input type="radio" name="E2" value="000">c) Ik zit er eigenlijk tussenin.

<p>Vraag 3:</p>
<input type="radio" name="E3" value="10." checked="checked">a) Ik ben makkelijk afgeleid, met minder aandacht voor een enkele specifieke taak.<br>
<input type="radio" name="E3" value="-10">b) Ik kan me goed focussen, met minder aandacht voor het grote geheel.<br>
<input type="radio" name="E3" value="000">c) Ik zit er eigenlijk tussenin.

<p>Vraag 4:</p>
<input type="radio" name="E4" value="10." checked="checked">a) Ik ben een makkelijke prater en ga graag uit.<br>
<input type="radio" name="E4" value="-10">b) Ik ben een goede luisteraar en meer een privé-persoon.<br>
<input type="radio" name="E4" value="000">c) Ik zit er eigenlijk tussenin.<br>

<div class="vraag"><p>Vraag 5:</p>
<input type="radio" name="E5" value="10." checked="checked">a) Als gastheer/-vrouw ben ik altijd het centrum van de belangstelling.<br>
<input type="radio" name="E5" value="-10">b) Als gastheer/-vrouw ben altijd achter de schermen bezig om te zorgen dat alles soepeltjes verloopt.<br>
<input type="radio" name="E5" value="000">c) Ik zit er eigenlijk tussenin.
</div>
<p>Intuitive (N) versus Sensing (S).</p>
<!--totaal: 50%-->
<p>Vraag 6:</p>
<input type="radio" name="N1" value="12.50" checked="checked">a) Ik geef de voorkeur aan concepten en het leren op basis van associaties.<br>
<input type="radio" name="N1" value="-12.5">b) Ik geef de voorkeur aan observaties en het leren op basis van feiten.<br>
<input type="radio" name="N1" value="00000">c) Ik zit er eigenlijk tussenin.

<p>Vraag 7:</p>
<input type="radio" name="N2" value="12.50" checked="checked">a) Ik heb een groot inbeeldingsvermogen en heb een globaal overzicht van een project.<br>
<input type="radio" name="N2" value="-12.5">b) Ik ben pragmatisch ingesteld en heb een gedetailleerd beeld van elke stap.<br>
<input type="radio" name="N2" value="00000">c) Ik zit er eigenlijk tussenin.

<p>Vraag 8:</8>
<input type="radio" name="N3" value="12.50" checked="checked">a) Ik kijk naar de toekomst.<br>
<input type="radio" name="N3" value="-12.5">b) Ik houd mijn blik op het heden gericht.<br>
<input type="radio" name="N3" value="00000">c) Ik zit er eigenlijk tussenin.<br>

<p>Vraag 9:</p>
<input type="radio" name="N4" value="12.50" checked="checked">a) Ik houd van de veranderlijkheid in relaties en taken.<br>
<input type="radio" name="N4" value="-12.5">b) Ik houd van de voorspelbaarheid in relaties en taken.<br>
<input type="radio" name="N4" value="00000">c) Ik zit er eigenlijk tussenin.

<p>Thinking (T) versus Feeling (F)</p>
<!--totaal:50%-->
<p>Vraag 10:</p>
<input type="radio" name="T1" value="12.50" checked="checked">a) Ik overdenk een beslissing helemaal.<br>
<input type="radio" name="T1"  value="-12.5">b) Ik beslis met mijn gevoel.<br>
<input type="radio" name="T1" value="00000">c) Ik zit er eigenlijk tussenin.<br>

<p>Vraag 11:</p>
<input type="radio" name="T2" value="12.50" checked="checked">a) Ik werk het beste met een lijst plussen en minnen.<br>
<input type="radio" name="T2" value="-12.5">b) Ik beslis op basis van de gevolgen voor mensen.<br>
<input type="radio" name="T2" value="00000">c) Ik zit er eigenlijk tussenin.<br>

<p>Vraag 12:</p>
<input type="radio" name="T3" value="12.50" checked="checked">a) Ik ben van nature kritisch.<br>
<input type="radio" name="T3" value="-12.5">b) Ik maak het mensen graag naar de zin.<br>
<input type="radio" name="T3" value="00000">c) Ik zit er eigenlijk tussenin.<br>

<p>Vraag 13:</p>
<input type="radio" name="T4" value="12.50" checked="checked">a) Ik ben eerder eerlijk dan tactisch.<br>
<input type="radio" name="T4" value="-12.5">b) Ik ben eerder tactisch dan eerlijk.<br>
<input type="radio" name="T4" value="00000">c) Ik zit er eigenlijk tussenin.<br>

<p>Judging (J) versus Perceiving (P)</p>
<p>Vraag 14:</p>
<input type="radio" name="J1" value="8.33330" checked="checked">a) Ik houd van vertrouwde situaties.<br>
<input type="radio" name="J1" value="-8.3333">>b) Ik houd van flexibele situaties.<br>
<input type="radio" name="J1" value="0000000">c) Ik zit er eigenlijk tussenin.<br>

<p>Vraag 15:</p>
<input type="radio" name="J2" value="8.33330" checked="checked">a) Ik plan alles, met een to-do lijstje in mijn hand.<br>
<input type="radio" name="J2" value="-8.3333">b) Ik wacht tot er meerdere ideeën opborrelen en kies dan on-the-fly wat te doen.<br>
<input type="radio" name="J2" value="0000000">c) Ik zit er eigenlijk tussenin.<br>

<p>Vraag 16:</p>
<input type="radio" name="J3" value="8.33330" checked="checked">a) Ik houd van het afronden van projecten.<br>
<input type="radio" name="J3" value="-8.3333">b) Ik houd van het opstarten van projecten.<br>
<input type="radio" name="J3" value="0000000">c) Ik zit er eigenlijk tussenin.<br>

<p>Vraag 17:</p>
<input type="radio" name="J4" value="8.33330" checked="checked">a) Ik ervaar stress door een gebrek aan planning en abrupte wijzigingen.<br>
<input type="radio" name="J4" value="-8.3333">b) Ik ervaar gedetailleerde plannen als benauwend en kijk uit naar veranderingen.<br>
<input type="radio" name="J4" value="0000000">c) Ik zit er eigenlijk tussenin.<br>

<p>Vraag 18:</p>
<input type="radio" name="J5" value="8.33330" checked="checked">a) Het is waarschijnlijker dat ik een doel bereik.<br>
<input type="radio" name="J5" value="-8.3333">b) Het is waarschijnlijker dat ik een kans zie.<br>
<input type="radio" name="J5" value="0000000">c) Ik zit er eigenlijk tussenin.<br>

<p>Vraag 19:</p>
<input type="radio" name="J6" value="8.33330" checked="checked">a) "All play and no work maakt dat het project niet afkomt."<br>
<input type="radio" name="J6" value="-8.3333">b) "All work and no play maakt je maar een saaie pief."<br>
<input type="radio" name="J6" value="0000000">c) Ik zit er eigenlijk tussenin.<br>

</br>
<button type="submit" id="submit" value="Submit" name="submitquiz" onclick="loopForm(document.quizform)"> Naar profiel</button>
        </form>
    </div>
</div>

Javascript code:

function loopForm(form) {
    var radioResults="";
    var persoonlijkheidstype;
for (var i = 0; i < form.elements.length; i++ ) {
    if (form.elements[i].type == 'radio') {
            if (form.elements[i].checked == true) {
                radioResults += form.elements[i].value + ' ';
            }
        }
        }

var EI_resultaatstring = radioResults.slice(0,19).split(" ");
var E_resultaat = EI_resultaatstring.map(Number).reduce(adde,50);
var totaal = 100;
function adde(a, b) {
    return a + b;
}
var I_resultaat = 100 - E_resultaat;

var NS_resultaatstring = radioResults.slice(20,43).split(" ");
var N_resultaat = NS_resultaatstring.map(Number).reduce(addn,50);

function addn(a, b) {
    return a + b;
}
var S_resultaat = 100 - N_resultaat;

var TF_resultaatstring = radioResults.slice(44,67).split(" ");
var T_resultaat = TF_resultaatstring.map(Number).reduce(addn,50);

function addn(a, b) {
    return a + b;
}
var F_resultaat = 100 - T_resultaat;

var JP_resultaatstring = radioResults.slice(68,117).split(" ");
var J_resultaat = JP_resultaatstring.map(Number).reduce(addt,50);

function addt(a, b) {
    return a + b;
}
var P_resultaat = 100 - J_resultaat;

if(E_resultaat > I_resultaat && N_resultaat > S_resultaat && T_resultaat > F_resultaat && J_resultaat > P_resultaat){
    var type = "E(" + E_resultaat +"%)" + " N(" + N_resultaat + "%)" + " T(" + T_resultaat +"%)" + " J(" + J_resultaat + "%)";

  document.getElementById('persoon').innerHTML = type;
}
}

profiel page (where the score will be display)

<div class="content">
    <h2>U bent geregistreerd!</h2>
    Je bent een<p id="persoon"></p>
</div>

Answer 1

De easiest solution for this is sessionStorage so you can set your points as;

var uitslag = 100; // For example sessionStorage.setItem('punten', puntenVar);

And on the profile page you can do;

sessionStorage.getItem("punten")

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage