将Javascript变量输入innerHTML(Inputing Javascript variables into innerHTML)
我在网上搜索但没有发现有用的东西。
我做了一个小小的英语测验。 在每个难度部分之后，我希望Javascript进入innerHTML并将变量得分输入到innerHTML中。 这是我必须开始的：
function eqs() {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: '+score+'."}
这并没有在我想要的bootstrap jumbotron中显示任何内容。
我稍微改了一下：
function eqs() {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + score + "."}这次，它显示了011111111。
所有代码：
<!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() {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + score + "."}
</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"><h1 id="sum1"></h1></div>
</div>
</div>
</body>
</html>
I searched online but didn't find much that was helpful.
I made a small English quiz. After each section of difficulty, I want Javascript to go into innerHTML and input the variable score into innerHTML. Here's what I had to begin with:
function eqs() {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: '+score+'."}
That did not display anything in the bootstrap jumbotron that I wanted.
I changed it a little bit:
function eqs() {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + score + "."}
This time, it displayed 011111111.
All of the code:
<!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() {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + score + "."}
</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"><h1 id="sum1"></h1></div>
</div>
</div>
</body>
</html>
最满意答案
当你var score = "0"; 您将分数声明为字符串 - 而不是数字，因此当您调用add1（）时，您将附加“1”而不是增加值。
尝试： var score = 0;
编辑：
还有秒： var seconds = 0; 或者你会遇到同样的问题。
When you var score = "0"; You're declaring score as a string - not a number so when you call add1() you're appending '1' rather than increasing the value.
Try: var score = 0;
EDIT:
Also with seconds: var seconds = 0; or you'll have the same issue there.
更多推荐
发布评论