如何使用 CSS hidden 属性重定向到新页面？

Question

so I've coded a questionnaire and I'm running into an issue. When a user clicks submit the questionnaire the results are displayed near the submit button I was hoping for them to be redirected to a new page (where results are displayed) by using the CSS hidden property, but I don't understand how I can do that and also for some reason after submitting there is an 'undefined' option displaying under the choices, how can I get rid of that? I'd really appreciate it if someone can help me solve my issues, thank you!

I linked the IDE for my project if that's easier: https://repl.it/@AS11RA/Forest-Firefighters-Website#start%20questionnaire.js

Heres the startquestionnaire.Js file:

function buttonClicked(button) {
  button.style.visibility = 'hidden';
  startSurvey();
  console.log('Survey started.');
}

function startSurvey() {
  var i;
  var j;
  var k;
  for (i = 0; i < ourQuestions.length; i++) {
    document.getElementById('questions').innerHTML +=
      '<form id="question">Q' + (i + 1) + ': ' + ourQuestions[i].question;
    debugger;
    for (let [key, value] of Object.entries(ourQuestions[i].answers)) {
      document.forms[i].innerHTML +=
        '</div><div class="answer"><input name="q1" value="' +
        value +
        '" id="value4" type="checkbox" />' +
        `${key}: '${value}'`; //use a string literal, makes a dev's life very easy
      ('<br/>');
    }
    document.getElementById('questions').innerHTML += '</form><br/><br/>';
  }

  document.getElementById('questions').innerHTML +=
    '<button class="button" onclick="solveSurvey()">Submit Questionnaire</button>';
}

var ourQuestions = [
  {
    question:
      'While naturally occurring wildfires can benefit ecosystems, unnatural blazes started by uncaring and negligent humans can do great harm and cause many deaths. What percentage of wildfires do you think are started by humans?',
    answers: {
      a: '10-15%',
      b: '85-90%',
      c: '45-50%',
      d: '25-30%',
    },
    correctAnswer: 'b',
  },
  {
    question: 'If you have lit a campfire before, how did you extinguish it?',
    answers: {
      a: 'I did not extinguish it and waited for it to die on its own',
      b:
        'I extinguished the campfire with a bucket of water and made sure it was fully extinguished.',
      c: 'I have never lit a campfire before.',
      d: 'uhhh',
    },
    correctAnswer: 'b',
  },
  {
    question: 'What are the two most common reasons that forest fires start?',
    answers: {
      a: 'Lightning and human negligence',
      b: 'Spontaneous combustion and erosion',
      c: 'Animals igniting flames and overcrowded bushlands',
      d: 'Strong Wind Patterns',
    },
    correctAnswer: 'a',
  },
  {
    question: 'What time of the year do most forest fires occur?',
    answers: {
      a: 'Summer',
      b: 'Spring',
      c: 'Fall',
      d: 'Winter',
    },
    correctAnswer: 'a',
  },
  {
    question: 'How fast do you think forest fires spread?',
    answers: {
      a: '10.8 km/h',
      b: '6.4 km/h',
      c: '22.2 km/h',
      d: '3.2 km/h',
    },
    correctAnswer: 'a',
  },
  {
    question: 'What do forest fires need in order to burn?',
    answers: {
      a: 'Water',
      b: 'High humidity',
      c: 'Fuel',
      d: 'Clear weather',
    },
    correctAnswer: 'c',
  },
  {
    question:
      'What is one of the main toxic gases present in forest fire smoke?',
    answers: {
      a: 'Osmium tetroxide',
      b: 'Disulfur decafluoride',
      c: 'Tungsten hexafluoride ',
      d: 'carbon monoxide',
    },
    correctAnswer: 'd',
  },
  {
    question:
      'What natural disasters could be caused as a consequence of a destructive forest fire?',
    answers: {
      a: 'Erosion, flash flooding and landslides',
      b: 'Tornadoes',
      c: 'Snow',
      d: 'Tsunami and earthquakes',
    },
    correctAnswer: 'a',
  },
  {
    question: 'What major factor determines a forest fire’s behaviour?',
    answers: {
      a: 'Amount of water vapour in air',
      b: 'Density of Forests',
      c: 'Wind',
      d: 'Hours of sunlight',
    },
    correctAnswer: 'c',
  },
  {
    question: 'What 3 things are needed to start a fire?',
    answers: {
      a: 'Matches, oxygen, wood',
      b: 'Air and sunlight',
      c: 'Fuel, heat, oxygen',
      d: 'Fuel, oxygen, wood',
    },
    correctAnswer: 'c',
  },
  {
    question: 'Which one of these is NOT a type of forest fire?',
    answers: {
      a: 'Crown',
      b: 'Firework',
      c: 'Surface',
      d: 'Ground ',
    },
    correctAnswer: 'b',
  },
  {
    question: 'What was the cause of the Amazon forest fires in 2019?',
    answers: {
      a: 'Deforestation for agriculture usage',
      b: 'Fireworks',
      c: 'Unattended campfire',
      d: 'Arson',
    },
    correctAnswer: 'a',
  },
  {
    question:
      'Which one of these names are NOT an alternate name for forest fires?',
    answers: {
      a: 'Wildfires',
      b: 'Shrub fires',
      c: 'Natural fireworks',
      d: 'Brushfires ',
    },
    correctAnswer: 'c',
  },
  {
    question: 'How many forest fires occurred in 2019?',
    answers: {
      a: '25 653',
      b: '50 477',
      c: '45 809',
      d: '89 431',
    },
    correctAnswer: 'b',
  },
];

function solveSurvey() {
  var x;
  var txt = ' ';
  var i = 0;
  var correct = 0;
  for (i = 0; i < document.forms.length; i++) {
    x = document.forms[i];
    for (j = 0; j < x.length; j++) {
      if (x[j].checked) {
        correctAnswer = ourQuestions[i].correctAnswer;
        if (x[j].value == ourQuestions[i].answers[correctAnswer]) {
          correct += 1;
        }
      }
    }
    document.forms[i].innerHTML +=
      '</div><div class="answer"><input name="q1" value="' +
      ourQuestions[i].answers[j] +
      '" id="value4" type="radio" />' +
      ourQuestions[i].answers[j] +
      '<br/>';
  }
  document.getElementById('questions').innerHTML +=
    'Correct answers: ' + correct;
}

Here's the questionnaire.HTML file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Forest Firefighters: Questionnaire</title>
    <link href="survey style.css" rel="stylesheet" type="text/css" />
    <link href="main style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js" type="text/javascript"></script>
    <script src="start questionnaire.js" type="text/javascript"></script>
  </head>
  
  <body>
    <!--────────────────Header───────────────-->
      <header>
          <nav> 
            <ul class="nav-bar"><div class="bg"></div>
                <li><a class="nav-link" href="about.html">About</a></li>
                <li><a class="nav-link" href="index.html">Home</a></li>
                <li><a class="nav-link active" href="questionnaire.html">Questionnaire</a></li>
              <li><a class="nav-link" href="learning more.html">Learning more</a></li>
          <li><a class="nav-link" href="">Ways you can help</a></li>
            </ul>
          </nav>
      </header>

    <main>
        <!--─────────────────Home────────────────-->
        <div id="home">
            <div class="filter"></div>

        <!--────questionnaire button─────-->        
        <button class="button" onclick="buttonClicked(this)">Start Questionnaire</button>
        <spacer></spacer>
        <div id="questions"></div>
        <spacer></spacer>
        <spacer></spacer>
        </div>
    
      
          <div class="citing">
        <a class="citing-link" href=questionnaire.html">Image Source: https://phys.org/news/2019-11-countries-forest.html</a>
      <div>      
      </main>  

    <!--─────────────────Footer────────────────-->
      <footer class="copyright">© 2020 Amber, Aatiqah, Selina</footer>
  </body>

</html>

Answer 1

If we store your results in its own variable, we then have 2 options right off the bat.

var results = `Correct answers: ${correct}`;
  

Easiest way would be to display it in an alert function, let the browser handle it.

alert(results);

Another way would be to spawn your own window and edit the html contents of it.

var resultsWin = window.open("about:blank", "Questionnaire Results", "width=200,height=100");
resultsWin.document.write(results);

Keep in mind that the opening of the window will not work in the snippet due to this:

js:253 Blocked opening 'about:blank' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.

---

The reason for the undefined was because your appending of the answers was using the inside for loop j but it existed in just the outer one, with no access to j

I went ahead and replaced it to this:

x.innerHTML += `<div class="answer"><input name="q1" value="${ourQuestions[i].correctAnswer}" id="value4" type="radio" />${ourQuestions[i].correctAnswer}</div>`;

 function buttonClicked(button) { button.style.visibility = 'hidden'; startSurvey(); console.log('Survey started.'); } function startSurvey() { var i, j, k; for (i = 0; i < ourQuestions.length; i++) { document.getElementById('questions').innerHTML += '<form id="question">Q' + (i + 1) + ': ' + ourQuestions[i].question; for (let [key, value] of Object.entries(ourQuestions[i].answers)) { document.forms[i].innerHTML += `<div class="answer"><input name="q1" value="${value}" id="value4" type="checkbox" />${key}: '${value}'</div>`; } document.getElementById('questions').innerHTML += '</form><br/><br/>'; } document.getElementById('questions').innerHTML += '<button class="button" onclick="solveSurvey()">Submit Questionnaire</button>'; } var ourQuestions = [{ question: 'While naturally occurring wildfires can benefit ecosystems, unnatural blazes started by uncaring and negligent humans can do great harm and cause many deaths. What percentage of wildfires do you think are started by humans?', answers: { a: '10-15%', b: '85-90%', c: '45-50%', d: '25-30%', }, correctAnswer: 'b', }, { question: 'If you have lit a campfire before, how did you extinguish it?', answers: { a: 'I did not extinguish it and waited for it to die on its own', b: 'I extinguished the campfire with a bucket of water and made sure it was fully extinguished.', c: 'I have never lit a campfire before.', d: 'uhhh', }, correctAnswer: 'b', }, { question: 'What are the two most common reasons that forest fires start?', answers: { a: 'Lightning and human negligence', b: 'Spontaneous combustion and erosion', c: 'Animals igniting flames and overcrowded bushlands', d: 'Strong Wind Patterns', }, correctAnswer: 'a', }, { question: 'What time of the year do most forest fires occur?', answers: { a: 'Summer', b: 'Spring', c: 'Fall', d: 'Winter', }, correctAnswer: 'a', }, { question: 'How fast do you think forest fires spread?', answers: { a: '10.8 km/h', b: '6.4 km/h', c: '22.2 km/h', d: '3.2 km/h', }, correctAnswer: 'a', }, { question: 'What do forest fires need in order to burn?', answers: { a: 'Water', b: 'High humidity', c: 'Fuel', d: 'Clear weather', }, correctAnswer: 'c', }, { question: 'What is one of the main toxic gases present in forest fire smoke?', answers: { a: 'Osmium tetroxide', b: 'Disulfur decafluoride', c: 'Tungsten hexafluoride ', d: 'carbon monoxide', }, correctAnswer: 'd', }, { question: 'What natural disasters could be caused as a consequence of a destructive forest fire?', answers: { a: 'Erosion, flash flooding and landslides', b: 'Tornadoes', c: 'Snow', d: 'Tsunami and earthquakes', }, correctAnswer: 'a', }, { question: 'What major factor determines a forest fire's behaviour?', answers: { a: 'Amount of water vapour in air', b: 'Density of Forests', c: 'Wind', d: 'Hours of sunlight', }, correctAnswer: 'c', }, { question: 'What 3 things are needed to start a fire?', answers: { a: 'Matches, oxygen, wood', b: 'Air and sunlight', c: 'Fuel, heat, oxygen', d: 'Fuel, oxygen, wood', }, correctAnswer: 'c', }, { question: 'Which one of these is NOT a type of forest fire?', answers: { a: 'Crown', b: 'Firework', c: 'Surface', d: 'Ground ', }, correctAnswer: 'b', }, { question: 'What was the cause of the Amazon forest fires in 2019?', answers: { a: 'Deforestation for agriculture usage', b: 'Fireworks', c: 'Unattended campfire', d: 'Arson', }, correctAnswer: 'a', }, { question: 'Which one of these names are NOT an alternate name for forest fires?', answers: { a: 'Wildfires', b: 'Shrub fires', c: 'Natural fireworks', d: 'Brushfires ', }, correctAnswer: 'c', }, { question: 'How many forest fires occurred in 2019?', answers: { a: '25 653', b: '50 477', c: '45 809', d: '89 431', }, correctAnswer: 'b', }, ]; function solveSurvey() { var x; var txt = ' '; var i = 0; var correct = 0; for (i = 0; i < document.forms.length; i++) { x = document.forms[i]; for (j = 0; j < x.length; j++) { if (x[j].checked) { correctAnswer = ourQuestions[i].correctAnswer; if (x[j].value == ourQuestions[i].answers[correctAnswer]) { correct += 1; } } } x.innerHTML += `<div class="answer"><input name="q1" value="${ourQuestions[i].correctAnswer}" id="value4" type="radio" />${ourQuestions[i].correctAnswer}</div>`; } //document.getElementById('questions').innerHTML += 'Correct answers: ' + correct; var results = `Correct answers: ${correct}`; // Easiest way would be to display it in an alert function, let the browser handle it. alert(results); // Another way would be to spawn your own window and edit the html contents of it. var resultsWin = window.open("about:blank", "Questionnaire Results", "width=200,height=100"); resultsWin.document.write(results); }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Forest Firefighters: Questionnaire</title> <link href="survey style.css" rel="stylesheet" type="text/css" /> <link href="main style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="script.js" type="text/javascript"></script> <script src="start questionnaire.js" type="text/javascript"></script> </head> <body> <!--────────────────Header───────────────--> <header> <nav> <ul class="nav-bar"> <div class="bg"></div> <li><a class="nav-link" href="about.html">About</a></li> <li><a class="nav-link" href="index.html">Home</a></li> <li><a class="nav-link active" href="questionnaire.html">Questionnaire</a></li> <li><a class="nav-link" href="learning more.html">Learning more</a></li> <li><a class="nav-link" href="">Ways you can help</a></li> </ul> </nav> </header> <main> <!--─────────────────Home────────────────--> <div id="home"> <div class="filter"></div> <!--────questionnaire button─────--> <button class="button" onclick="buttonClicked(this)">Start Questionnaire</button> <spacer></spacer> <div id="questions"></div> <spacer></spacer> <spacer></spacer> </div> <div class="citing"> <a class="citing-link" href="questionnaire.html">Image Source: https://phys.org/news/2019-11-countries-forest.html</a> <div> </main> <!--─────────────────Footer────────────────--> <footer class="copyright">© 2020 Amber, Aatiqah, Selina</footer> </body> </html>