【发布时间】：2020-11-05 23:02:25
【问题描述】：
所以我编写了一份调查问卷，但遇到了一个问题。当用户单击提交调查表时，结果显示在提交按钮附近，我希望通过使用 CSS 隐藏属性将它们重定向到新页面（显示结果的位置），但我不明白我该怎么做那也是由于某种原因，在提交后有一个“未定义”选项显示在选项下，我该如何摆脱它？如果有人能帮我解决我的问题，我将不胜感激，谢谢！
如果这更容易的话，我会为我的项目链接 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>
【问题讨论】：
-
您究竟是如何希望可以使用 CSS 属性来操作浏览器的？很确定你需要 JS。
-
@jmargolisvt 有人告诉我我可以这样使用它：“使用 css hidden 属性并将其添加到现有的
并隐藏整个内容并有一个单独的 main 标签，默认情况下是隐藏的并在您提交问卷时出示。” -
@jmargolisvt 我不明白他们的意思有没有更简单的方法？
-
那个人只是建议您在页面上隐藏/显示内容。您需要使用 JS 进行实际重定向。或路由器，具体取决于您的应用程序的架构。
-
@jmargolisvt 如果你不介意，你能告诉我如何用我的代码来做吗？
标签： javascript html css object