0
我在網上搜索，但沒有發現太多有用的東西。將Javascript變量輸入到innerHTML中
我做了一個小的英語測驗。在每一段難度之後，我想讓Javascript進入innerHTML並將可變分數輸入到innerHTML中。這是我不得不開始什麼：
function eqs() {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: '+score+'."}
這並沒有顯示，我想引導的超大屏幕東西。
我改變一點點：
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>
\t $(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">
\t <h1>Year 7 English Quiz - Are you smarter than an 11 year old?</h1><hr>
\t <h3>Rules: (Read before playing)</h3>
\t <p>'-' Means fill in the blank with a word</p>
\t <p>'|' Means fill in the blank with a phrase</p>
\t <p>'+' Means complete the word</p>
\t <p>There are 33 questions in this quiz.</p>
\t <p>By hitting the timer to the bottom, you can challenge yourself and see how quick you could complete the quiz.</p>
\t <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>
\t <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>
\t <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>
\t <p>Scroll down after each question, as some may not show on your screen and will be below</p>
\t <p>At the end, your points will be tallied up. Through hard, you will receive negative points for answering a question incorrectly.</p>
\t <button class="btn btn-default" onclick="stopwatch">Stopwatch</button>
\t <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>
\t <div id="q1" class="collapse">
\t \t <h1>Easy Questions:</h1><br>
\t \t <div class="jumbotron"><h1 class="question">Question 1: When is _ birthday?</h1></div>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q2">Answer 1: Your</button>
\t \t <button onclick="minus1()" class="btn btn-danger" data-toggle="collapse" data-target="#q2">Answer 2: You're</button><hr>
\t </div>
\t <div id="q2" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 2: +ranky</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q3">Answer 1: Kranky</button>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q3">Answer 2: Cranky</button><hr>
\t </div>
\t <div id="q3" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 3: Spot the word class that doesn't exist.</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 1: Determiner</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 2: Verb</button>
\t \t <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>
\t </div>
\t <div id="q4" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 4: It's - cats and dogs.</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q5">Answer 1: Pouring</button>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q5">Answer 2: Raining</button><hr>
\t </div>
\t <div id="q5" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 5: +yclone</h1></div>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q6">Answer 1: Cyclone</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q6">Answer 2: Syclone</button><hr>
\t </div>
\t <div id="q6" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 6: I - cheeseburger.</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 1: Haz</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 2: Have</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 3: Has a</button>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 4: Have a</button><hr>
\t </div>
\t <div id="q7" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 7: Find the tense of the following sentence: I located my nearest barber.</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 1: Present</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 2: Simple</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 3: Continuous</button>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 4: Past</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 5: Future</button><hr>
\t </div>
\t <div id="q8" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 8: - the remote control.</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 1: Gimme</button>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 2: Give me</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 3: Gave me</button><hr>
\t </div>
\t <div id="q9" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 9: What is the closest definition to a synonym?</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q10">Answer 1: A word used to describe a verb</button>
\t \t <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>
\t \t <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>
\t </div>
\t <div id="q10" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 10: What is the closest definition to a noun phrase?</h1></div>
\t \t <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>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 2: A phrase with 1 or more noun(s) in it</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 3: A noun that also acts a phrase</button><hr>
\t </div>
\t <div id="q11" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 11: The he was entirely - in frozen carbonite.</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 1: Encasted</button>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 2: Encapsulated</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 3: Capsulated</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 4: Capered</button><hr>
\t </div>
\t <div id="eqsummary" class="collapse">
\t <div class="jumbotron"><h1 id="sum1"></h1></div>
\t </div>
\t </div>
</body>
</html>
請閱讀[如何創建最小，完整和可驗證示例]（http://stackoverflow.com/help/mcve）。通過減少代碼成爲問題的核心，您甚至可以在發佈問題之前找到原因。如果你沒有找到它，你會有一個更加整潔的問題，會更快地回答。 – Pharaoh