如何使用 CSS hidden 屬性重定向到新頁面？

Question

所以我編寫了一份問卷，但遇到了一個問題。 當用戶點擊提交問卷時，結果會顯示在提交按鈕附近並且由於某種原因，提交后在選項下顯示了一個“未定義”選項，我該如何擺脫它？ 如果有人能幫我解決我的問題，我將不勝感激，謝謝！

如果更容易的話，我為我的項目鏈接了 IDE： https : //repl.it/@AS11RA/Forest-Firefighters-Website#start%20questionnaire.js

下面是 startquestionnaire.Js 文件：

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;
}

這是問卷.HTML 文件：

<!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

如果我們將您的結果存儲在自己的變量中，那么我們立即有 2 個選項。

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

最簡單的方法是在警報功能中顯示它，讓瀏覽器處理它。

alert(results);

另一種方法是生成您自己的窗口並編輯它的 html 內容。

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

請記住，由於以下原因，在代碼段中無法打開窗口：

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.

---

undefined的原因是因為您對答案的附加使用了內部 for 循環j但它僅存在於外部循環中，無法訪問j

我繼續將其替換為：

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>