页面后使用Javascript/jQuery的运行脚本,渲染
问题描述:
我试图让从两个功能,correct[]
和wrong[]
反馈,显示为用户解答问题。我加了jQuery ready
功能,试图使我想要的一切提示过,但没有成功出现。我已经将准备就绪的功能写入我的代码几次,但没有运气。任何人都可以帮忙吗?页面后使用Javascript/jQuery的运行脚本,渲染
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Math Quiz</title>
<script>
$("document").ready(function() {
$("body").css("background-color", "green");
});
</script>
</head>
<body>
<br><br>
<p><em><strong>Feedback</strong></em></p><p><br><br>
<script>
//Question array \t \t \t
\t \t \t var question = ["1. What is 1+1?",
"2. What is 2+2?",
"3. What is 3+3?",
"4. What is 4+4?",
\t \t \t \t \t \t \t \t "5. What is 5+5?"
];
//Other Variables
\t \t \t var qlength = question.length;
\t \t \t var counter = 0;
var answer = ["2", "4", "6", "8", "10"];
//First box to tell the viewer whats going on
\t \t \t alert('Answer the following 5 questions to determine if you are 1st grade smart.');
//Loop that asks the questions
\t for (var i = 0; i < qlength; i++)
\t \t \t \t {
\t \t \t \t \t var userAnswer = prompt(question[i]); //Stores the answer to each question in userAnswer
\t \t \t \t \t \t //Actions for correct answer
\t \t \t \t \t \t if (userAnswer == answer[i])
\t \t \t \t \t \t {
\t \t \t \t \t \t \t alert('Correct'); \t \t \t \t \t \t \t
\t \t \t \t \t \t \t correct(i);
\t \t \t \t \t \t \t var counter = counter + 1; //Adds one to the counter for correct answers
\t \t \t \t \t \t }
\t \t \t \t \t \t //Actions for wrong answer
\t \t \t \t \t \t else
\t \t \t \t \t \t { \t \t \t \t \t \t
\t \t \t \t \t \t \t alert('Wrong');
\t \t \t \t \t \t \t wrong(i);
\t \t \t \t \t \t }
\t \t \t \t }
//Functions
\t \t \t function correct(i)
\t \t \t {
\t \t \t \t document.write(i + 1, ". Correct" + "<br>");
\t \t \t } \t
\t \t \t function wrong(i)
\t \t \t {
\t \t \t \t document.write(i + 1, ". Wrong, correct answer = ", answer[i], "<br>");
\t \t \t }
//Calculates the results based on the counter
\t \t \t document.write("<br>You got " + counter + " answers out of 5 correct.");
\t \t </script>
\t </p>
</body>
</html>
答
负载后不要使用文件撰写。它抹去页面和脚本。 而是更新标签 - 在这里我使用jQuery的你已经在使用追加答案
// These needed to be and STAY global
// Question array \t \t \t
var question = ["1. What is 1+1?",
"2. What is 2+2?",
"3. What is 3+3?",
"4. What is 4+4?",
"5. What is 5+5?"
];
//Other Variables
var qlength = question.length;
var counter = 0;
var answer = ["2", "4", "6", "8", "10"];
$("document").ready(function() {
$("body").css("background-color", "green");
ask();
$("#result").append("<br>You got " + counter + " answer"+(counter==1?"":"s")+" out of 5 correct.");
});
function ask() {
//First box to tell the viewer whats going on
alert('Answer the following 5 questions to determine if you are 1st grade smart.');
//Loop that asks the questions
for (var i = 0; i < qlength; i++) {
var userAnswer = prompt(question[i]); //Stores the answer to each question in userAnswer
//Actions for correct answer
if (userAnswer == answer[i]) {
alert('Correct');
correct(i);
counter++; //Adds one to the counter for correct answers
}
//Actions for wrong answer
else {
alert('Wrong');
wrong(i);
}
}
}
function correct(i) {
$("#result").append(i + 1, ". Correct" + "<br>");
}
function wrong(i) {
$("#result").append(i + 1, ". Wrong, correct answer = ", answer[i], "<br>");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><em> <strong> Feedback </strong></em>
</p>
<p id="result"></p>
负荷后不要使用文件撰写。而是使用一些标签的innerHTML或.html() – mplungjan
清理你的代码。将您的JavaScript代码(显然排除将其链接。 –
此外,不要把你的jQuery脚本之前 –