Trouble concatenating strings

Question

I'm having an issue concatenating strings. Where I initially declare the 'output' variable in my last function, I'm able to get the number of questions correct printed to my modal window.

However, my concatenation of strings 2 lines down from that won't work and I've tried so many things. I'm sure it's something simple but any help would be appreciated!

I'm not sure how much code is relevant to the solution so I apologize for the wall of code.

I'm new to JS and my first post on Stackoverflow so any tips or advice is appreciated. Thanks in advance!

var randomNum1 = 0;
var randomNum2 = 0;
var correctAnswer = 0;
var questionNumber = 0;
var question = "<h2>Question #: " + questionNumber + "</h2>";
var answersRight = 0;
//jQuery command to make enter key submit answer
$(document).keypress(function(e) {
  if (e.which == 13) {
    $("#sub").click();
  }
});
//questions object
var questionsAsked = [

];
generateRandom();
document.getElementById('finished').style.display = 'none';
//check answer, push question info to array
function check() {
  var userAnswer = parseInt(document.getElementById("userAnswer").value);
  document.getElementById('userAnswer').value = "";
  if (userAnswer === correctAnswer) {
    answersRight++
  } else {
    answersRight += 0;
  }
  if (questionNumber < 3) {
    next();
  } else {
    document.getElementById('sub').style.display = 'none';
    document.getElementById('submitForm').style.display = 'none';
    document.getElementById('finished').style.display = 'block';
    finish();
  }
}

function random() {
    return Math.floor(Math.random() * 50) + 1;
  }
  //generate random numbers

function generateRandom() {
    randomNum1 = random();
    randomNum2 = random();
    document.getElementById("randomNum1").innerHTML = randomNum1;
    document.getElementById("randomNum2").innerHTML = randomNum2;
    correctAnswer = randomNum1 + randomNum2;
    questionNumber += 1;
    question = "<h2>Question #: " + questionNumber + "</h2>";
    $("#question").html(question);
    questionsAsked.push([questionNumber, randomNum1, randomNum2, correctAnswer]);
  }
  //next button

function next() {
  generateRandom();
}

function finish() {
  var output = document.getElementById("quizResults").innerHTML = 'You got ' + answersRight + ' out of ' + questionNumber + ' answers correct!';
  var percent = Math.round((answersRight / questionNumber) * 100);
  output += ' You got ' + percent + '% on this quiz! Outstanding!';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="container">
    <div>
      <h1 class="text-center">Welcome to Math World!</h1>
    </div>
    <div>
      <div id="question">
      </div>
      <div id="questionArea">
        <br>
        <h3>Add the following numbers</h3>
        <h3 id="randomNum1"></h3>
        <h3>+</h3>
        <h3 id="randomNum2"></h3>
        <p id="message"></p>
      </div>
      <div id="submitForm">
        <div class="form-inline">
          <div class="form-group">
            <label for="answer">Enter Answer:</label>
            <input type="text" class="form-control" id="userAnswer" placeholder="Type answer here">
          </div>
          <button id="sub" type="submit" class="btn btn-primary" onclick="check()">Submit Answer</button>
        </div>
      </div>
      <button id="finished" type="submit" class="btn btn-success" data-toggle="modal" data-target="#myModal">Finish Quiz</button>
    </div>

    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Quiz Results</h4>
          </div>
          <div id="quizResults" class="modal-body">

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>

      </div>
    </div>
    <script

One tip would be to describe *how* it doesn't work. What is the expected result and what is the result you're getting currently? Where exactly is it 'not working'? — Andrew Li, Sep 30 '16 at 14:06
Another tip - format your code. Also, make a [minimal, complete and verifiable example](http://stackoverflow.com/help/mcve), so you don't need to include all of the code. You can post it here as a snippet or produce a JSFiddle or equivalent. In the process of narrowing down what's wrong, you might even find it yourself. — VLAZ, Sep 30 '16 at 14:11

score 0 · Accepted Answer · edited May 23 '17 at 10:34

0

(Disclaimer: This answer might not actually solve your problem, as noted in the comments. I can't delete it, though, because it was accepted.) (Please see the other answer)

The line

var output = document.getElementById("quizResults").innerHTML = 'You got '+answersRight+ ' out of ' +questionNumber+ ' answers correct!';

does not have the effect you think it does, because javascript does not interpret a statement like var a = b = c the way you think it does. Instead, it is better to use var a = c; var b = c;, like so:

var output = 'You got '+answersRight+ ' out of ' +questionNumber+ ' answers correct!';
document.getElementById("quizResults").innerHTML = output;

For more information on how javascript interprets var a = b = c;, please see this question: Javascript a=b=c statements

edited May 23 '17 at 10:34

Community

1
1

answered Sep 30 '16 at 14:14

Benjamin Sigal

111
5

`javascript does not interpret a statement like var a = b = c the way you think it does` it would be useful to dispel the confusion by explaining how it is actually interpreted. – VLAZ Sep 30 '16 at 14:17
None of the answers in that question explain why this would be a problem. It's interpreted as `var a = (b = c)`, which should produce the same result in this case. – Barmar Sep 30 '16 at 14:28
Thank you for the solution and the link to help add to my JS foundation. I'm learning just enough to be dangerous now. – Dustin Moore Sep 30 '16 at 14:30
@DustinMoore Did this really solve the problem? I don't think it should. You still have the problem I pointed out in my answer. – Barmar Sep 30 '16 at 14:33

score 0 · Answer 2 · answered Sep 30 '16 at 14:32

The problem is that you're updating the output variable after you've already put it into the quizResults DIV. Assigning the string to .innerHTML makes a copy of it, it's not a reference to the variable, so updating the variable doesn't change the DIV contents. You need to assign to .innerHTML after you've performed the concatenation.

var randomNum1 = 0;
var randomNum2 = 0;
var correctAnswer = 0;
var questionNumber = 0;
var question = "<h2>Question #: " + questionNumber + "</h2>";
var answersRight = 0;
//jQuery command to make enter key submit answer
$(document).keypress(function(e) {
  if (e.which == 13) {
    $("#sub").click();
  }
});
//questions object
var questionsAsked = [

];
generateRandom();
document.getElementById('finished').style.display = 'none';
//check answer, push question info to array
function check() {
  var userAnswer = parseInt(document.getElementById("userAnswer").value);
  document.getElementById('userAnswer').value = "";
  if (userAnswer === correctAnswer) {
    answersRight++
  } else {
    answersRight += 0;
  }
  if (questionNumber < 3) {
    next();
  } else {
    document.getElementById('sub').style.display = 'none';
    document.getElementById('submitForm').style.display = 'none';
    document.getElementById('finished').style.display = 'block';
    finish();
  }
}

function random() {
    return Math.floor(Math.random() * 50) + 1;
  }
  //generate random numbers

function generateRandom() {
    randomNum1 = random();
    randomNum2 = random();
    document.getElementById("randomNum1").innerHTML = randomNum1;
    document.getElementById("randomNum2").innerHTML = randomNum2;
    correctAnswer = randomNum1 + randomNum2;
    questionNumber += 1;
    question = "<h2>Question #: " + questionNumber + "</h2>";
    $("#question").html(question);
    questionsAsked.push([questionNumber, randomNum1, randomNum2, correctAnswer]);
  }
  //next button

function next() {
  generateRandom();
}

function finish() {
  var output = 'You got ' + answersRight + ' out of ' + questionNumber + ' answers correct!';
  var percent = Math.round((answersRight / questionNumber) * 100);
  output += ' You got ' + percent + '% on this quiz! Outstanding!';
  document.getElementById("quizResults").innerHTML = output;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="container">
    <div>
      <h1 class="text-center">Welcome to Math World!</h1>
    </div>
    <div>
      <div id="question">
      </div>
      <div id="questionArea">
        <br>
        <h3>Add the following numbers</h3>
        <h3 id="randomNum1"></h3>
        <h3>+</h3>
        <h3 id="randomNum2"></h3>
        <p id="message"></p>
      </div>
      <div id="submitForm">
        <div class="form-inline">
          <div class="form-group">
            <label for="answer">Enter Answer:</label>
            <input type="text" class="form-control" id="userAnswer" placeholder="Type answer here">
          </div>
          <button id="sub" type="submit" class="btn btn-primary" onclick="check()">Submit Answer</button>
        </div>
      </div>
      <button id="finished" type="submit" class="btn btn-success" data-toggle="modal" data-target="#myModal">Finish Quiz</button>
    </div>

    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Quiz Results</h4>
          </div>
          <div id="quizResults" class="modal-body">

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>

      </div>
    </div>
    <script

Trouble concatenating strings

2 Answers2