使用 jQuery/JavaScript 回答后删除文本答案

【问题标题】：Remove text after answer has been made with jQuery/JavaScript使用 jQuery/JavaScript 回答后删除文本
【发布时间】：2018-12-11 01:47:31
【问题描述】：

我认为我的逻辑有问题。应该发生的是，用户将输入对所提出问题的答案。提交问题后，当前文本（第一个问题）会消失，数组中的下一个问题会代替第一个问题出现。

目前，问题继续堆积在一起，而没有删除上一个问题。每次我尝试添加更多代码来删除元素时，都会出现错误。

请帮忙！我正在慢慢添加到这个代码功能，但我现在被困在这个添加/删除文本的事情上。

$(function() {
  $("#submit").on("click", askQuestion)

  var questions = [{
      question: "Is the price higher or lower than $40.00?",
      answer: "higher"
    },
    {
      question: "Is the price higher or lower than $100.00?",
      answer: "higher"
    },
    {
      question: "Is the price higher or lower than $50.00?",
      answer: "lower"
    }
  ];

  function askQuestion() {
    if (answer && document.querySelector("#user-answer").value == answer) {
      document.querySelector("#correct").style.display = "block";
      document.querySelector("#sorry").style.display = "none";
      answer = randomQuestion()
    } else {
      document.querySelector("#correct").style.display = "none";
      document.querySelector("#sorry").style.display = "block";

    }
  }

  function randomQuestion() {
    var question = questions[Math.floor(Math.random() * questions.length)];

    document.querySelector("#user-answer").value = "";

    var element = document.createElement("div");
    element.innerHTML = question.question;

    $("#question").append(element.firstChild);

    return question.answer;
  }

  var answer = randomQuestion();
});

<html>
<head>
  <meta charset="UTF-8">
  <title>Game time</title>
</head>
<body>
  <h1>Question and Answer</h1>
  <div>
    <h2 id="question"></h2>
  </div>
  <label for="text">Answer:</label>
  <input id="user-answer" type="text" value="">
  <button id="submit" type="submit">Submit</button>
  <p id="sorry" style="display: none">Sorry...</p>
  <p id="correct" style="display: none">You got it!</p>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="main.js"></script>
</body>
</html>

【问题讨论】：

错误是什么？
stackoverflow.com/questions/1675215/…

标签： javascript jquery html dom

【解决方案1】：

当您应该更改问题时，您只是使用append，而不是追加。

您可以使用： $("#question").html(element.firstChild);

而不是$("#question").append(element.firstChild);

$(function() {

  $("#submit").on("click", askQuestion)

  var questions = [{
      question: "Is the price higher or lower than $40.00?",
      answer: "higher"
    },
    {
      question: "Is the price higher or lower than $100.00?",
      answer: "higher"
    },
    {
      question: "Is the price higher or lower than $50.00?",
      answer: "lower"
    }
  ];

  function askQuestion() {
    if (answer && document.querySelector("#user-answer").value == answer) {
      document.querySelector("#correct").style.display = "block";
      document.querySelector("#sorry").style.display = "none";
      answer = randomQuestion()
    } else {
      document.querySelector("#correct").style.display = "none";
      document.querySelector("#sorry").style.display = "block";

    }
  }


  function randomQuestion() {
    var question = questions[Math.floor(Math.random() * questions.length)];

    document.querySelector("#user-answer").value = "";

    var element = document.createElement("div");
    element.innerHTML = question.question;

    $("#question").html(element.firstChild);

    return question.answer;

  }

  var answer = randomQuestion();

});

<html>

<head>
  <meta charset="UTF-8">
  <title>Game time</title>
</head>

<body>
  <h1>Question and Answer</h1>
  <div>
    <h2 id="question"></h2>
  </div>
  <label for="text">Answer:</label>
  <input id="user-answer" type="text" value="">
  <button id="submit" type="submit">Submit</button>

  <p id="sorry" style="display: none">Sorry...</p>
  <p id="correct" style="display: none">You got it!</p>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="main.js"></script>
</body>

</html>

【讨论】：

你是救生员。我几乎是字面意义上的哭了。几天来，我在工作的休息时间一直在这样做，而且我被困的时间比我想承认的要长。我不敢相信这是唯一的问题。
@Nick0989 不用担心！很高兴我能帮上忙，我们都去过那里。

【解决方案2】：

您正在使用附加方法。如果要完全覆盖文本，可以使用 .text (jQuery) 方法或 .innerText (Vanilla js)

【讨论】：

那行不通，你在解释一个节点。 html 有效，text 和 innerText 无效，因为它们将其转换为字符串“[object Object]”
如果您使用返回一组元素的选择器，您将获得一个节点。如果您使用 document.getElementById 或 document.querySelector 您将获得该特定元素，并且 .innerText 方法将可用。关于 jQuery .text 方法，我尝试过并且效果很好。 $('#question').text('a');可能我解释的不对。
当然，我明白了，但这超出了您提供的答案的范围。代码$("#question").append(element.firstChild); 是上面代码中需要更改的内容，但是您的答案并没有说明更改输入的任何内容，只是使用了什么方法。例如，如果您将代码更改为$("#question").text(element.firstChild);，它将显示“[object Object]”，因为element.firstChild 是一个对象，而不是文本。