连接字符串时遇到问题

Question

我在连接字符串时遇到问题。在我最初在最后一个函数中声明 'output' 变量的地方，我能够将正确的问题数量打印到我的模态 window.

但是，我的 2 行字符串连接不起作用，我已经尝试了很多东西。我确信这很简单，但我们将不胜感激！

我不确定有多少代码与解决方案相关，所以我为代码墙道歉。

我是 JS 的新手，也是我在 Whosebug 上的第一个 post，因此欢迎任何提示或建议。提前致谢！

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

Answer 1

（免责声明：如评论中所述，此答案实际上可能无法解决您的问题。不过，我无法删除它，因为它已被接受。）（请看其他回答）

行

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

没有您认为的效果，因为 javascript 没有按照您认为的方式解释 var a = b = c 这样的语句。相反，最好使用 var a = c; var b = c;，像这样：

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

有关 javascript 如何解释 var a = b = c; 的更多信息，请参阅此问题：Javascript a=b=c statements

Answer 2

问题是您更新 output 变量之后您已经将它放入 quizResults DIV。将字符串分配给 .innerHTML 会复制它，它不是对变量的引用，因此更新变量不会更改 DIV 的内容。执行串联后，您需要分配给 .innerHTML。

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

javascript

concatenation

modal-window