2016-04-19 10 views
0

私はラジオボタン付きのフォームを持っています。送信ボタンをクリックするとスコア(js変数)が計算されます。私は別のページ(profielページ)にスコアを表示したい。 innerHTMLを使用しようとしましたが、表示されず、このエラーが発生します。Uncaught TypeError:nullのプロパティ 'innerHTML'を設定できません。私はそれを調べて、innerhtmlがonload関数内になければならないことを知りました。それもやってみましたが、うまくいきませんでした。これを行う別の方法がありますか?それとも、私のコードに正しいものがありますか?前もって感謝します!JavaScriptがinnerHTMLを使用してhtmlページに表示されない

私のコードは次のとおりです。 クイズのページ:(すべての質問を無視してください)私はサブミットボタンの要素で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; 
} 
} 

(スコアが表示されます)profielページ

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

あなたの質問は本当に意味がありません。 page2のhtmlをpage1から変更することはできません。 –

+0

@EvanTrimboli変数を他のページに表示するにはどうすればよいですか? – Cathy

+0

2つの主なアプローチ、a)何らかの種類のローカルメカニズム(localstorage、cookie)に値を格納する、b)クエリ文字列の一部として値を渡しているページに渡して値を読み込みます。 –

答えて

2

デ最も簡単な解決策はsessionStorageので、あなたのようにあなたのポイントを設定することができますです。

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

そして、あなたが行うことができますプロフィールページ上。

sessionStorage.getItem("punten")

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

+0

お勧めありがとうございます! :) – Cathy

関連する問題