javascript - javascript 中的变量未使用innerHTML 显示在html 页面上

Question

我有一个带有单选按钮的表单，当您单击“提交”时，它会计算您的分数(js 变量)。我想在另一个页面(个人资料页面)上显示分数。我尝试使用innerHTML，但它没有显示，并且收到此错误:未捕获的类型错误:无法设置 null 的属性“innerHTML”。我查了一下，发现innerhtml必须在onload函数中。所以也尝试了一下，但也没有成功。也许还有另一种方法可以做到这一点吗？或者我的代码中有什么不正确的地方？预先感谢您!

这是我的代码: 测验页面:(忽略所有问题)我在提交按钮元素中调用 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;//例如 sessionStorage.setItem('punten', puntenVar);

在个人资料页面上您可以执行以下操作；

sessionStorage.getItem("punten")

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