Remove text after answer has been made with jQuery/JavaScript

Question

I've run into an issue with my logic I think. What should happen is, the user will enter an answer to the presented question. Once the question has been submitted, the current text (first question) disappears, and the next question in the array appears in place of the first question.

Currently the questions continue to pile on to one another without removing the previous question. Every time I try and add more code to remove the element, it gives me an error.

Please help! I am slowly adding to this codes functionality but I am stuck now on this add/remove text thing.

$(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>

https://stackoverflow.com/questions/1675215/ajax-replace-instead-of-append — fstep, Jul 02 '18 at 19:53

score 3 · Accepted Answer · answered Jul 02 '18 at 19:54

You're simply using append when you should be changing the question, not appending to it.

You can use: $("#question").html(element.firstChild);

instead of $("#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>

You're a life saver. I almost cried literally. I've been doing this for a few days on my down time at work and I've been stuck for longer than I'd like to admit. I can't believe this was the only issue. — Nick0989, Jul 02 '18 at 19:58
@Nick0989 no worries! glad I could help, we've all been there. — zfrisch, Jul 02 '18 at 19:59

score -1 · Answer 2 · answered Jul 02 '18 at 19:55

-1

You are using the append method. If you want to completly override the text, you could use the .text (jQuery) method or .innerText (Vanilla js)

answered Jul 02 '18 at 19:55

Joao Paulo

199
8

2

That won't work, you're interpreting a node. `html` works, `text` and `innerText` don't because they turn it into a string "[object Object]" – zfrisch Jul 02 '18 at 19:57
You get a node if you use a selector that returns a group of elements. If you use document.getElementById or document.querySelector you will get that specific element, and the the .innerText methods will be available. About the jQuery .text method I tried and worked fine. $('#question').text('a'); Maybe I just didn't explain right. – Joao Paulo Jul 02 '18 at 21:50
Sure, I get it, but that's outside the scope of the answer you provided. The code `$("#question").append(element.firstChild);` is what needs to be changed in the above code, but your answer doesn't say anything about changing the input, only what method is being used. For example if you change the code to `$("#question").text(element.firstChild);` it will display "[object Object]" because `element.firstChild` is an object, not text. – zfrisch Jul 02 '18 at 21:58

Remove text after answer has been made with jQuery/JavaScript

2 Answers2