Inputing Javascript variables into innerHTML

Question

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>

Please read How to create a Minimal, Complete, and Verifiable example. By reducing your code the the core of the problem, you might find the reason even before posting the question. If you don't find it, you'll have a much neater question that will be answered faster. — Imanuel
– Imanuel, Commented Apr 22, 2017 at 18:48

Michael Tallino · Accepted Answer · 2017-04-22 18:56:04Z

1

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.

edited Apr 22, 2017 at 18:56

answered Apr 22, 2017 at 18:48

Michael Tallino

8214 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alexander Nied Over a year ago

Also do the same with your other numerical declaration seconds, otherwise you risk the same there.

Ryan Zhang Over a year ago

Wow, that was much simpler than I thought. Thanks!

user2923318 · Accepted Answer · 2017-04-22 19:05:13Z

0

I checked your code, Its completely right..But when you define score, you are defining as string var score = "0". thats why its not adding your score.. Just change this line var score = "0"; to var score = 0;(remove inverted comma). And you are good to go.

answered Apr 22, 2017 at 19:05

user2923318

656 bronze badges

1 Comment

Ryan Zhang Over a year ago

I didn't know that it would be that simple. Thanks!

Collectives™ on Stack Overflow

Inputing Javascript variables into innerHTML

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related