如何从queryString获取数据?

时间:2019-10-16 23:36:21

标签: javascript html css

我进行了一次智力类型测试,当用户单击“获取结果”时,他们将被重定向到结果网页以查看结果。问题是结果以查询字符串的形式显示在地址栏中(音乐: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 &nbsp; <input class="radiobutton" type="radio" name="m13" value="1" personalityType="mathematical"> Rarely
        &nbsp; <input class="radiobutton" type="radio" name="m13" value="2" personalityType="mathematical"> Often
        &nbsp;
        <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;

}

0 个答案:

没有答案
相关问题