私はラジオボタン付きのフォームを持っています。送信ボタンをクリックするとスコア(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>
あなたの質問は本当に意味がありません。 page2のhtmlをpage1から変更することはできません。 –
@EvanTrimboli変数を他のページに表示するにはどうすればよいですか? – Cathy
2つの主なアプローチ、a)何らかの種類のローカルメカニズム(localstorage、cookie)に値を格納する、b)クエリ文字列の一部として値を渡しているページに渡して値を読み込みます。 –