我进行了一次智力类型测试,当用户单击“获取结果”时,他们将被重定向到结果网页以查看结果。问题是结果以查询字符串的形式显示在地址栏中(音乐:musicScore等),但是我不知道如何以我想要的方式显示它们,我可以将结果放入a或类似内容中。>
这是测试页HTML的一小部分:
<div class="question">
<div>13. I am good at chess or other strategy games. </div>
<div> <input class="radiobutton" type="radio" name="m13" value="0" personalityType="mathematical" personalityType="mathematical"> Never <input class="radiobutton" type="radio" name="m13" value="1" personalityType="mathematical"> Rarely
<input class="radiobutton" type="radio" name="m13" value="2" personalityType="mathematical"> Often
<input class="radiobutton" type="radio" name="m13" value="3" personalityType="mathematical"> Always
</div>
<p></p>
</div>
<div>
<a class="myButton" onclick="calculateScores();navigateResults()">Get Results</a>
</div>
这是我的JS:
var bodilyScore = 0;
var mathematicalScore = 0;
var naturalistScore = 0;
var interpersonalScore = 0;
var visualScore = 0;
var verbalScore = 0;
var intrapersonalScore = 0;
var musicalScore = 0;
function calculateScores() {
var button = document.getElementsByClassName("radiobutton");
var buttonLength = button.length;
musicalScore = 0;
bodilyScore = 0;
mathematicalScore = 0;
naturalistScore = 0;
interpersonalScore = 0;
visualScore = 0;
verbalScore = 0;
intrapersonalScore = 0;
for (var i = 0; i < buttonLength; i++) {
if (button[i].type === 'radio' && button[i].checked) {
var value = Number(button[i].value);
var type = button[i].getAttribute("personalityType");
switch (type) {
case "musical":
musicalScore += value;
break;
case "bodily":
bodilyScore += value;
break;
case "mathematical":
mathematicalScore += value;
break;
case "naturalist":
naturalistScore += value;
break;
case "interpersonal":
interpersonalScore += value;
break;
case "visual":
visualScore += value;
break;
case "verbal":
verbalScore += value;
break;
case "intrapersonal":
intrapersonalScore += value;
break;
}
}
}
showResults();
};
function navigateResults() {
var objScores = {
musical: musicalScore,
bodily: bodilyScore,
mathematical: mathematicalScore,
naturalist: naturalistScore,
interpersonal: interpersonalScore,
visual: visualScore,
verbal: verbalScore,
intrapersonal: intrapersonalScore,
}
var queryString = "?" + encodeURI(JSON.stringify(objScores));
window.location.href = "results.html" + queryString;
}
function showResults() {
console.log(musicalScore);
console.log(bodilyScore);
console.log(mathematicalScore);
console.log(naturalistScore);
console.log(interpersonalScore);
console.log(visualScore);
console.log(verbalScore);
console.log(intrapersonalScore);
document.getElementById('musicalResult').innerText = musicalScore;
document.getElementById('bodilyResult').innerText = bodilyScore;
document.getElementById('naturalistResult').innerText = naturalistScore;
document.getElementById('interpersonalResult').innerText = interpersonalScore;
document.getElementById('visualResult').innerText = visualScore;
document.getElementById('intrapersonalResult').innerText = intrapersonalScore;
document.getElementById('verbalResult').innerText = verbalScore;
document.getElementById('mathematicalResult').innerText = mathematicalScore;
}