麻烦连接字符串

时间：2016-09-30 14:05:33

标签： javascript concatenation modal-window

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

然而，我的字符串串联2行不起作用，我尝试了很多东西。我确信这很简单，但任何帮助都会受到赞赏！

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

我是JS的新手，也是我在Stackoverflow上的第一篇文章，所以我们非常感谢任何提示或建议。提前谢谢！

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 个答案:

答案 0 :(得分：0)

（免责声明：正如评论中所述，这个答案实际上可能无法解决您的问题。但我无法将其删除，因为它已被接受。） （请参阅其他答案）

该行

>=mean

没有您认为的效果，因为javascript不像您认为的那样解释像<=mean这样的语句。相反，最好使用var output = document.getElementById("quizResults").innerHTML = 'You got '+answersRight+ ' out of ' +questionNumber+ ' answers correct!'; ，如下所示：

var a = b = c

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

答案 1 :(得分：0)

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题