javascript中的變量未使用innerHTML顯示在html頁面上

Question

我有一個帶有單選按鈕的表單，當您單擊提交時，它會計算您的分數（js變量）。 我想在另一頁（個人資料頁）上顯示分數。 我嘗試使用innerHTML，但未顯示，並且出現以下錯誤：Uncaught TypeError：無法將屬性'innerHTML'設置為null。 我查了一下，發現innerhtml必須在onload函數中。 因此也嘗試過，但是也沒有用。 也許還有另一種方法可以做到這一點？ 還是我的代碼中有錯誤的地方？ 先感謝您！

這是我的代碼：測驗頁面：（忽略所有問題）我在Submit button元素中調用javascript函數。

<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代碼：

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;
}
}

配置頁面（將顯示分數）

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

Answer 1

最簡單的解決方案是sessionStorage因此您可以將點設置為；

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

在個人資料頁面上，您可以執行；

sessionStorage.getItem("punten")

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage