javascript - 使用 jQuery/JavaScript 回答后删除文本
问题描述
我认为我的逻辑遇到了问题。应该发生的是,用户将输入对所提出问题的答案。提交问题后,当前文本(第一个问题)消失,数组中的下一个问题出现在第一个问题的位置。
目前,这些问题继续堆积在一起,而没有删除前一个问题。每次我尝试添加更多代码来删除元素时,都会出现错误。
请帮忙!我正在慢慢添加此代码功能,但我现在被困在这个添加/删除文本的事情上。
$(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>
解决方案
您只是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>
推荐阅读
- c# - Nunit , C# : Test Fixture Teardown Nunit 的执行顺序
- react-native - SDK 目录 '/Users/username/Library/Android/sdk' 不存在
- python - 基于 Python 3 (Jupyter Notebook) 中最大列值的 IF- ELSE 条件
- javascript - 导入的箭头函数中的这个未定义反应
- spring - Spring Boot 中的 SFTP 文件下载
- time-series - PCA 可以应用于多变量时间序列进行降维吗?
- mysql - 我们如何在 MySQL 中创建替换变量?
- c - cs50 恢复,“恢复的图像不匹配”
- scala - Scala 类型类解析
- javascript - 你能在不使用 Deferred 的情况下写这个吗?