最近,我发布了如何将变量实现为innerHTML以在在线测验中使用。结果是变量在我的代码中被意外声明为字符串。我摆脱了引号,网页又恢复了工作。之后添加不同的句子,如"你的分数是11/11。你以满分为标准进行测试。不要太兴奋,这只是一个简单的部分。"对于测验的每个部分,我为每个部分分配了一个不同的分数变量,以便用户可以看到他们在测试后的表现。例如,easy部分得到了它自己的得分变量escore,这是通过在测验期间将该变量设置为该特定时间的当前得分而创建的。这就是我留下的:
function eqs() {
var escore = score;
if (escore < 4) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. If you're reading this message, you got below 4 marks. Considering that this the easy section, you should've got a much higher score.";}
if (escore > 4 && < 7) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. You didn't get a bad score, but neither did you get a good score. If you were guessing, consider yourself lucky.";}
if (escore > 7 && < 10) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. You got a fairly decent score. Typically, you should get 11, but you're not far off.";}
if (escore == 11) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. Nice job! You aced this section with full marks! Don't get too excited though, this is only the easy section.";}
}
什么都没出现,所以我决定添加一个警报,只要执行该功能就会显示一个弹出屏幕,告诉我得分的值。我重新测试了它,但再次没有出现。这一次,我扫描了整个文件,以确保我没有错过任何愚蠢的错误。我哪里错了? (如果我把所有这些都写成一个愚蠢的错误而我设法不看......那将是如此具有讽刺意味......)
整个代码(以防万一你需要):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
background-color: red;
color: white;
font-family: 'Open Sans', Arial;
margin: auto;
margin-top: 20px;
max-width: 1160px;
}
.jumbotron {background-color: #ff4d4d;}
.btn {width: 100%;}
</style>
<script>
$(document).ready(function(){$('[data-toggle="tooltip"]').tooltip();});
var score = 0;
var seconds = 0;
function add1() {score += 1};
function add2() {score += 2};
function add3() {score += 3};
function eqs() {
var escore = score;
alert(" + escore + ");
if (escore < 4) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. If you're reading this message, you got below 4 marks. Considering that this the easy section, you should've got a much higher score.";}
if (escore > 4 && < 7) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. You didn't get a bad score, but neither did you get a good score. If you were guessing, consider yourself lucky.";}
if (escore > 7 && < 10) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. You got a fairly decent score. Typically, you should get 11, but you're not far off.";}
if (escore == 11) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. Nice job! You aced this section with full marks! Don't get too excited though, this is only the easy section.";}
}
</script>
<title>Year 7 English Quiz - Are you smarter than an 11 year old?</title>
</head>
<body>
<div class="container">
<h1>Year 7 English Quiz - Are you smarter than an 11 year old?</h1><hr>
<h3>Rules: (Read before playing)</h3>
<p>'-' Means fill in the blank with a word</p>
<p>'|' Means fill in the blank with a phrase</p>
<p>'+' Means complete the word</p>
<p>There are 33 questions in this quiz.</p>
<p>By hitting the timer to the bottom, you can challenge yourself and see how quick you could complete the quiz.</p>
<p>11 will be a set of easy questions, another 11 will be a set of medium questions and the last 11 will be hard / or virtually impossible for a Year 7 to figure out.</p>
<p>These difficulty levels only apply to Year 7s. A hard question could be simple to you.</p>
<p>Have fun and don't get mad if you don't pass the test. If you fail, then that doesn't necessarily bad at English!</p>
<p>Don't click a button two times during a quiz unless you want to mess everything up. But I know you're probably a rebel.</p>
<p>Scroll down after each question, as some may not show on your screen and will be below</p>
<p>At the end, your points will be tallied up. Through hard, you will receive negative points for answering a question incorrectly.</p>
<button class="btn btn-default" onclick="stopwatch">Stopwatch</button>
<span data-toggle="collapse" data-target="#q1" id="disableoc"><button type="button" class="btn btn-default"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Chill Out M8">Just get to the questions already!</a></button></span><hr>
<div id="q1" class="collapse">
<h1>Easy Questions:</h1><br>
<div class="jumbotron"><h1 class="question">Question 1: When is _ birthday?</h1></div>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q2">Answer 1: Your</button>
<button onclick="minus1()" class="btn btn-danger" data-toggle="collapse" data-target="#q2">Answer 2: You're</button><hr>
</div>
<div id="q2" class="collapse">
<div class="jumbotron"><h1 class="question">Question 2: +ranky</h1></div>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q3">Answer 1: Kranky</button>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q3">Answer 2: Cranky</button><hr>
</div>
<div id="q3" class="collapse">
<div class="jumbotron"><h1 class="question">Question 3: Spot the word class that doesn't exist.</h1></div>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 1: Determiner</button>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 2: Verb</button>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 3: Noun</button>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 4: Preposition</button>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 5: Proverb</button>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 6: Adjective</button><hr>
</div>
<div id="q4" class="collapse">
<div class="jumbotron"><h1 class="question">Question 4: It's - cats and dogs.</h1></div>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q5">Answer 1: Pouring</button>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q5">Answer 2: Raining</button><hr>
</div>
<div id="q5" class="collapse">
<div class="jumbotron"><h1 class="question">Question 5: +yclone</h1></div>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q6">Answer 1: Cyclone</button>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q6">Answer 2: Syclone</button><hr>
</div>
<div id="q6" class="collapse">
<div class="jumbotron"><h1 class="question">Question 6: I - cheeseburger.</h1></div>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 1: Haz</button>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 2: Have</button>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 3: Has a</button>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 4: Have a</button><hr>
</div>
<div id="q7" class="collapse">
<div class="jumbotron"><h1 class="question">Question 7: Find the tense of the following sentence: I located my nearest barber.</h1></div>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 1: Present</button>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 2: Simple</button>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 3: Continuous</button>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 4: Past</button>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 5: Future</button><hr>
</div>
<div id="q8" class="collapse">
<div class="jumbotron"><h1 class="question">Question 8: - the remote control.</h1></div>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 1: Gimme</button>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 2: Give me</button>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 3: Gave me</button><hr>
</div>
<div id="q9" class="collapse">
<div class="jumbotron"><h1 class="question">Question 9: What is the closest definition to a synonym?</h1></div>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q10">Answer 1: A word used to describe a verb</button>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q10">Answer 2: A group of words that acts in the same way as a participle</button><br>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 3: A word that is similar if not identical to another word</button><hr>
</div>
<div id="q10" class="collapse">
<div class="jumbotron"><h1 class="question">Question 10: What is the closest definition to a noun phrase?</h1></div>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 1: Answer 2 but the noun *must* be either a subject or object</button>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 2: A phrase with 1 or more noun(s) in it</button>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 3: A noun that also acts a phrase</button><hr>
</div>
<div id="q11" class="collapse">
<div class="jumbotron"><h1 class="question">Question 11: The he was entirely - in frozen carbonite.</h1></div>
<button class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 1: Encasted</button>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 2: Encapsulated</button>
<button class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 3: Capsulated</button>
<button class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 4: Capered</button><hr>
</div>
<div id="eqsummary" class="collapse">
<div class="jumbotron"><p id="sum1"></p></div>
</div>
</div>
</body>
</html>
&#13;
答案 0 :(得分:0)
您的第2和第3 if语句错误。你必须在&amp;&amp;和&amp;操作
答案 1 :(得分:0)
这是工作片段。它就像你要求的那样工作。
请试一试;)
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
background-color: red;
color: white;
font-family: 'Open Sans', Arial;
margin: auto;
margin-top: 20px;
max-width: 1160px;
}
.jumbotron {background-color: #ff4d4d;}
.btn {width: 100%;}
</style>
<title>Year 7 English Quiz - Are you smarter than an 11 year old?</title>
</head>
<body>
<div class="container">
<h1>Year 7 English Quiz - Are you smarter than an 11 year old?</h1><hr>
<h3>Rules: (Read before playing)</h3>
<p>'-' Means fill in the blank with a word</p>
<p>'|' Means fill in the blank with a phrase</p>
<p>'+' Means complete the word</p>
<p>There are 33 questions in this quiz.</p>
<p>By hitting the timer to the bottom, you can challenge yourself and see how quick you could complete the quiz.</p>
<p>11 will be a set of easy questions, another 11 will be a set of medium questions and the last 11 will be hard / or virtually impossible for a Year 7 to figure out.</p>
<p>These difficulty levels only apply to Year 7s. A hard question could be simple to you.</p>
<p>Have fun and don't get mad if you don't pass the test. If you fail, then that doesn't necessarily mean you're bad at English!</p>
<p>Don't click a button two times during a quiz unless you want to mess everything up. But I know you're probably a rebel.</p>
<p>Scroll down after each question, as some may not show on your screen and will be below</p>
<p>At the end, your points will be tallied up. Through hard, you will receive negative points for answering a question incorrectly.</p>
<button class="btn btn-default" onclick="stopwatch">Stopwatch</button>
<span data-toggle="collapse" data-target="#q1" id="disableoc"><button type="button" class="btn btn-default"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Chill Out M8">Just get to the questions already!</a></button></span><hr>
<div id="q1" class="collapse">
<h1>Easy Questions:</h1><br>
<div class="jumbotron"><h1 class="question">Question 1: When is _ birthday?</h1></div>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q2">Answer 1: Your</button>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q2">Answer 2: You're</button><hr>
</div>
<div id="q2" class="collapse">
<div class="jumbotron"><h1 class="question">Question 2: +ranky</h1></div>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q3">Answer 1: Kranky</button>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q3">Answer 2: Cranky</button><hr>
</div>
<div id="q3" class="collapse">
<div class="jumbotron"><h1 class="question">Question 3: Spot the word class that doesn't exist.</h1></div>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 1: Determiner</button>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 2: Verb</button>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 3: Noun</button>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 4: Preposition</button>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 5: Proverb</button>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 6: Adjective</button><hr>
</div>
<div id="q4" class="collapse">
<div class="jumbotron"><h1 class="question">Question 4: It's - cats and dogs.</h1></div>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q5">Answer 1: Pouring</button>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q5">Answer 2: Raining</button><hr>
</div>
<div id="q5" class="collapse">
<div class="jumbotron"><h1 class="question">Question 5: +yclone</h1></div>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q6">Answer 1: Cyclone</button>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q6">Answer 2: Syclone</button><hr>
</div>
<div id="q6" class="collapse">
<div class="jumbotron"><h1 class="question">Question 6: I - cheeseburger.</h1></div>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 1: Haz</button>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 2: Have</button>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 3: Has a</button>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 4: Have a</button><hr>
</div>
<div id="q7" class="collapse">
<div class="jumbotron"><h1 class="question">Question 7: Find the tense of the following sentence: I located my nearest barber.</h1></div>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 1: Present</button>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 2: Simple</button>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 3: Continuous</button>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 4: Past</button>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 5: Future</button><hr>
</div>
<div id="q8" class="collapse">
<div class="jumbotron"><h1 class="question">Question 8: - the remote control.</h1></div>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 1: Gimme</button>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 2: Give me</button>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 3: Gave me</button><hr>
</div>
<div id="q9" class="collapse">
<div class="jumbotron"><h1 class="question">Question 9: What is the closest definition to a synonym?</h1></div>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q10">Answer 1: A word used to describe a verb</button>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q10">Answer 2: A group of words that acts in the same way as a participle</button><br>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 3: A word that is similar if not identical to another word</button><hr>
</div>
<div id="q10" class="collapse">
<div class="jumbotron"><h1 class="question">Question 10: What is the closest definition to a noun phrase?</h1></div>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 1: Answer 2 but the noun *must* be either a subject or object</button>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 2: A phrase with 1 or more noun(s) in it</button>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 3: A noun that also acts a phrase</button><hr>
</div>
<div id="q11" class="collapse">
<div class="jumbotron"><h1 class="question">Question 11: The he was entirely - in frozen carbonite.</h1></div>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary">Answer 1: Encasted</button>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary">Answer 2: Encapsulated</button>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary">Answer 3: Capsulated</button>
<button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary">Answer 4: Capered</button><hr>
</div>
<div id="eqsummary" class="collapse">
<div class="jumbotron"><p id="sum1"></p></div>
</div>
</div>
<script>
$(document).ready(function(){$('[data-toggle="tooltip"]').tooltip();});
var score = 0;
var seconds = 0;
var qcount = 0;
function add1() {
score++;
qcount++;
if(qcount == 11) eqs(score);
};
function add2() {score += 2};
function add3() {score += 3};
function wAnswer() {
qcount++;
if(qcount == 11) eqs(score);
};
function eqs(score) {
var escore = score;
alert(" + escore + ");
if (escore < 4) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. If you're reading this message, you got below 4 marks. Considering that this the easy section, you should've got a much higher score.";}
if (escore > 4 && escore < 7) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. You didn't get a bad score, but neither did you get a good score. If you were guessing, consider yourself lucky.";}
if (escore > 7 && escore < 10) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. You got a fairly decent score. Typically, you should get 11, but you're not far off.";}
if (escore == 11) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. Nice job! You aced this section with full marks! Don't get too excited though, this is only the easy section.";}
}
</script>
</body>
</html>
&#13;
答案 2 :(得分:0)
正如其他人所说,您需要像if (escore > 4 && escore < 7)
这样进行比较。您还需要通过调用它来执行此功能。标识为<p id="sum1"></p>
的{{1}}父容器有#eqsummary
个类,因此它将被隐藏。
您可以将collapse
传递给它,而不是在escore
函数内重新声明eqs
,这会使您的函数变得模块化。
我猜您的代码仍在进行中,但这里是您问题中问题的解决方案
score
&#13;
$(document).ready(function(){
var score = 0;
var seconds = 0;
$('[data-toggle="tooltip"]').tooltip();
function add1() {score += 1;}
function add2() {score += 2;}
function add3() {score += 3;}
function eqs(escore) {
var sumContainer = document.getElementById("sum1");
if (escore < 4) {
sumContainer.innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. If you're reading this message, you got below 4 marks. Considering that this the easy section, you should've got a much higher score.";
}
if (escore > 4 && escore < 7) {
sumContainer.innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. You didn't get a bad score, but neither did you get a good score. If you were guessing, consider yourself lucky.";
}
if (escore > 7 && escore < 10) {
sumContainer.innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. You got a fairly decent score. Typically, you should get 11, but you're not far off.";
}
if (escore === 11) {
sumContainer.innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. Nice job! You aced this section with full marks! Don't get too excited though, this is only the easy section.";
}
}
add1();
add2();
add3();
eqs(score);
});
&#13;
body{
background-color: red;
color: white;
font-family: 'Open Sans', Arial;
margin: auto;
margin-top: 20px;
max-width: 1160px;
}
.jumbotron {background-color: #ff4d4d;}
.btn {width: 100%;}
#eqsummary div{
border: 1px solid #fff;
}
&#13;
详细了解JavaScript比较运算符。 https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators