【问题标题】:Trouble concatenating strings连接字符串时遇到问题
【发布时间】:2017-02-09 03:26:49
【问题描述】:

我在连接字符串时遇到问题。在我最初在最后一个函数中声明“输出”变量的地方,我能够将正确的问题数量打印到我的模式窗口中。

但是,我的 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

【问题讨论】:

  • 一个提示是描述如何它不起作用。预期的结果是什么,您目前得到的结果是什么?它到底在哪里“不工作”?
  • 另一个提示 - 格式化您的代码。另外,创建一个minimal, complete and verifiable example,这样您就不需要包含所有代码。您可以在此处将其作为 sn-p 发布或生成 JSFiddle 或等效文件。在缩小问题范围的过程中,您甚至可能自己发现问题。

标签: javascript concatenation modal-window


【解决方案1】:

(免责声明:如 cmets 中所述,此答案可能无法真正解决您的问题。不过,我无法删除它,因为它已被接受。) (请看其他答案)

线

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

【讨论】:

  • javascript does not interpret a statement like var a = b = c the way you think it does 通过解释它的实际解释方式来消除混淆会很有用。
  • 该问题中的所有答案都没有解释为什么这会是一个问题。它被解释为var a = (b = c),在这种情况下应该产生相同的结果。
  • 感谢您提供的解决方案和帮助添加到我的 JS 基础的链接。我现在正在学习足够危险。
  • @DustinMoore 这真的解决了问题吗?我认为不应该。您仍然有我在回答中指出的问题。
【解决方案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

【讨论】:

    猜你喜欢
    • 2015-06-09
    • 1970-01-01
    • 2015-06-02
    • 1970-01-01
    • 2015-04-25
    • 1970-01-01
    • 2020-10-01
    • 2013-01-15
    • 2021-09-09
    相关资源
    最近更新 更多