如何显示先前从一个网页执行到另一个网页的.js文件中的值?

时间:2019-10-16 13:45:13

标签: javascript html css

这是将在JS中执行计算的网页,还有其他我没有包含的PersonalityType

<div class="question">
      <div>40. It is easy for me to identify how I feel and why. </div>
      <div> <input class="radiobutton" type="radio" name="m40" value="0" personalityType="intrapersonal"> Never &nbsp; <input class="radiobutton" type="radio" name="m40" value="1" personalityType="intrapersonal"> Rarely &nbsp; <input
          class="radiobutton" type="radio" name="m40" value="2" personalityType="intrapersonal"> Often
        &nbsp; <input class="radiobutton" type="radio" name="m40" value="3" personalityType="intrapersonal"> Always
      </div>
        <div class="question">
      <div>35. English is/was one of my favorite subjects in school. </div>
      <div> <input class="radiobutton" type="radio" name="m35" value="0" personalityType="verbal"> Never &nbsp; <input class="radiobutton" type="radio" name="m35" value="1" personalityType="verbal"> Rarely &nbsp; <input class="radiobutton"
          type="radio" name="m35" value="2" personalityType="verbal">
        Often &nbsp;
        <input class="radiobutton" type="radio" name="m35" value="3" personalityType="verbal"> Always
      </div>
      <div>
           <a class="myButton" onclick=calculateScores() href=results.html>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 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;

}

我想获得音乐得分,言语得分等3个最高得分的值)。单击“获取结果”按钮后,将其显示在另一个网页上。我该如何在“得分”上附加最高显示值的文本?

1 个答案:

答案 0 :(得分:0)

如果要将结果传递到另一个页面,可以将其存储在 LocalStorage 中。

highestResults = {mathematicalScore: 4, naturalistScore: 6, verbalScore: 5};
localStorage.setItem('calculationResults', highestResults);

在结果页面上。

localStorage.getItem('calculationResults');

如果要向最高结果添加文本:

document.getElementById('mathematicalResult').innerText = mathematicalScore + ' - highest result';