将Javascript变量输入到innerHTML中

时间:2017-04-22 18:43:38

标签: javascript html variables dom 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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

当你var score = "0";当你将分数宣布为字符串时 - 而不是数字,所以当你拨打add1()时,你要追加&#39; 1&#39;而不是增加价值。

尝试:var score = 0;

编辑:

还有秒:var seconds = 0;或者你在那里遇到同样的问题。

答案 1 :(得分:0)

我检查了你的代码, 它完全正确。但是当你定义得分时,你定义为字符串var score =&#34; 0&#34;。这就是为什么它没有添加你的分数.. 只需更改此行var score =&#34; 0&#34 ;;到var score = 0;(删除反转的逗号)。 你很高兴。