Неполадки, связывающие строки

У меня проблема с объединением строк. Там, где я первоначально объявляю переменную output в моей последней функции, я могу получить правильное количество вопросов, напечатанных в моем модальном окне.

Тем не менее, моя конкатенация строк на 2 строки ниже не сработает, и я пробовал так много вещей. Я уверен, что это что-то простое, но любая помощь будет оценена!

Я не уверен, сколько кода имеет отношение к решению, поэтому я прошу прощения за стену кода.

Я новичок в JS и мой первый пост на Stackru, так что любые советы или рекомендации приветствуются. Заранее спасибо!

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

Источник

2 ответа

Решение

(Отказ от ответственности: этот ответ может на самом деле не решить вашу проблему, как отмечено в комментариях. Однако я не могу удалить его, потому что он был принят.) (Пожалуйста, смотрите другой ответ)

Линия

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 заявления

Источник

Проблема в том, что вы обновляете 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

Источник
Другие вопросы по тегам