無法使用 Javascript 成功提交表單
[英]Unable to submit the form successfully using Javascript
問題描述
這是使用 HTML、CSS 和 JavaScript 的測驗應用程序代碼。 您會收到一些問題，您需要從每個問題中選擇一個選項，然后單擊提交。 獲得的總分應顯示在“您已獲得 ____ 分”中。 但是，單擊提交時分數沒有變化。 這是 HTML、CSS 和 Javascript 的代碼。 請更正代碼，讓我知道我做錯了什么。
<!DOCTYPE html>
<html>
<head>
<title>Quiz Game</title>
</head>
<body>
<style>
.header{
text-align: center;
color:red;
margin-top:100px;
font-size: 100px;
}
.main{
border: solid 1px blue;
background-color: blue;
}
/* .options{
padding-left: 10px;
} */
.options li{
list-style-type: circle;
/* padding-left: 10px; */
font-size: 20px;
}
.result1{
border:2px solid black;
margin-left: 500px;
margin-right: 500px;
background-color: grey;
font-size: 20px;
color:red;
}
.span{
font-size: 50px;
color:salmon;
border:2px solid orangered;
}
</style>
<h1 class="header">QUIZ</h1>
<br>
<div class="main">
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 1</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">1) First Question</p>
<br>
<input type='radio' name='Q1' id='Option-1'value='Option 1' >
<label style="color:white;" for="Option-1">Option 1</label><br>
<br>
<input type='radio' name='Q1' id='Option-2' value='Option 2'>
<label style="color:white;" for="Option-2">Option 2</label><br>
<br>
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 2</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">2) Second Question</p>
<br>
<input type='radio' name='Q2' id='Option-3'value='Option 1' >
<label style="color:white;" for="Option-3">Option 1</label><br>
<br>
<input type='radio' name='Q2' id='Option-4' value='Option 2'>
<label style="color:white;" for="Option-4">Option 2</label><br>
<br>
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 3</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">3) Third Question</p>
<br>
<input type='radio' name='Q3' id='Option-5' value='Option 1'>
<label style="color:white;" for="Option-5">Option 1</label><br>
<br>
<input type='radio' name='Q3' id='Option-6'value='Option 2'>
<label style="color:white;" for="Option-6">Option 2</label><br>
<br>
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 4</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">4) Fourth Question</p>
<br>
<input type='radio' name='Q4' id='Option-7' value='Option 1'>
<label style="color:white;" for="Option-7">Option 1</label><br>
<br>
<input type='radio' name='Q4' id='Option-8' value='Option 2'>
<label style="color:white;" for="Option-8">Option 2</label><br>
<br> <br><br>
</div>
<div style="text-align:center">
<input type="submit" value="Submit" style="font-size:20px;">
</div>
</div>
<div class="result" style="text-align: center;">
<h1 class="result1" >Warning!! Clicking Submit will display the Result</h1>
<p style="font-size: 40px;color:green;">You have scored <span class="span"> 0% </span></p>
</div>
<script src="Quiz.js"></script>
</body>
</html>
Javascript :-
const correctAnswers=['Option 1','Option 2','Option 2','Option 1'];
const form = document.querySelector(".quiz-form");
let score=0;
form.addEventListener('submit',()=>{
form.preventDefault();
const userAnswers=[form.Q1.value,form.Q2.value,form.Q3.value,form.Q4.value];
userAnswers.forEach((answer,index)=>{
if(answer==correctAnswers[index]){
score+=20;
}
console.log(score);
});
const result=document.querySelector(".result")
result.querySelector("span").textContent= '${score}';
});
1 個解決方案
解決方案1
2 已采納 2020-03-12 14:32:15
您需要一個form元素，只需將整個測驗合二為一。
問題#2， preventDefault()是一個事件函數而不是一個元素，如下所示：
form.addEventListener('submit', e => {
e.preventDefault();
// more things .....
});
最后，您沒有正確插入score ，請使用反引號，即：
result.querySelector('span').textContent = `${score}`;
這是我建議的更改的工作示例：
<html>
<head>
<title>Quiz Game</title>
</head>
<body>
<style>
.header {
text-align: center;
color: red;
margin-top: 100px;
font-size: 100px;
}
.main {
border: solid 1px blue;
background-color: blue;
}
/* .options{
padding-left: 10px;
} */
.options li {
list-style-type: circle;
/* padding-left: 10px; */
font-size: 20px;
}
.result1 {
border: 2px solid black;
margin-left: 500px;
margin-right: 500px;
background-color: grey;
font-size: 20px;
color: red;
}
.span {
font-size: 50px;
color: salmon;
border: 2px solid orangered;
}
</style>
<h1 class="header">QUIZ</h1>
<br />
<div class="main">
<form>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 1</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">1) First Question</p>
<br />
<input type="radio" name="Q1" id="Option-1" value="Option 1" />
<label style="color:white;" for="Option-1">Option 1</label><br />
<br />
<input type="radio" name="Q1" id="Option-2" value="Option 2" />
<label style="color:white;" for="Option-2">Option 2</label><br />
<br />
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 2</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">2) Second Question</p>
<br />
<input type="radio" name="Q2" id="Option-3" value="Option 1" />
<label style="color:white;" for="Option-3">Option 1</label><br />
<br />
<input type="radio" name="Q2" id="Option-4" value="Option 2" />
<label style="color:white;" for="Option-4">Option 2</label><br />
<br />
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 3</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">3) Third Question</p>
<br />
<input type="radio" name="Q3" id="Option-5" value="Option 1" />
<label style="color:white;" for="Option-5">Option 1</label><br />
<br />
<input type="radio" name="Q3" id="Option-6" value="Option 2" />
<label style="color:white;" for="Option-6">Option 2</label><br />
<br />
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 4</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">4) Fourth Question</p>
<br />
<input type="radio" name="Q4" id="Option-7" value="Option 1" />
<label style="color:white;" for="Option-7">Option 1</label><br />
<br />
<input type="radio" name="Q4" id="Option-8" value="Option 2" />
<label style="color:white;" for="Option-8">Option 2</label><br />
<br />
<br /><br />
</div>
<div style="text-align:center">
<input type="submit" value="Submit" style="font-size:20px;" id="submit_button" />
</div>
</form>
</div>
<div class="result" style="text-align: center;">
<h1 class="result1">Warning!! Clicking Submit will display the Result</h1>
<p style="font-size: 40px;color:green;">You have scored <span class="span"> 0% </span></p>
</div>
<script>
const correctAnswers = ['Option 1', 'Option 2', 'Option 2', 'Option 1'];
const form = document.querySelector('form');
let score = 0;
form.addEventListener('submit', e => {
e.preventDefault();
const userAnswers = [form.Q1.value, form.Q2.value, form.Q3.value, form.Q4.value];
userAnswers.forEach((answer, index) => {
if (answer == correctAnswers[index]) {
score += 20;
}
console.log(score);
});
const result = document.querySelector('.result');
result.querySelector('span').textContent = `${score}`;
});
</script>
</body>
</html>
無法使用Javascript提交表單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.