Question

我想创建一些允许我拥有txt文档或单个网页（我可以使用MYSQL预填充）的内容，其中包含以下数据：

问题
正确答案为
ANSWER2
ANSWER3
Answer4

每个答案还需要有一定数量的关联点。然后我想将它放在我脚本中的特定div标签中，脚本如下：

<script>
// PSUEDO:
// If Answer from IRC is found, then run Element change
// Element change pulls from Question - Answer DB
// Else, Play sound.
var div = document.getElementById('Answerone');
div.innerHTML = 'Extra stuff';

var div = document.getElementById('Answertwo');
div.innerHTML = 'Extra stuff';

var div = document.getElementById('Answerthree');
div.innerHTML = 'Extra stuff';

var div = document.getElementById('Answerfour');
div.innerHTML = 'Extra stuff';

// Add all "Points" class together	
$( document ).ready(function() {
	var sum = 0;
	$('.Points').each(function () {
		sum += parseFloat($(this).text());
	});
	$('.total-points').text(sum);
});
</script>

body {
    background: url('http://puu.sh/i4hoo/361da54ae9.jpg') no-repeat;
    font-family:'Montserrat', sans-serif;
}
span {
    margin-top:10px;
}
#Answers {
    padding: 16px 0px;
    margin-left: 240px;
    color: white;
    //background: cyan;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
    width: 520px;
}
#Answerone {
    padding: 8px;
    //background: blue;
    width: 434px;
    float:left;
}
#Answertwo {
    padding: 8px;
    //background: blue;
    width: 434px;
    float:left;
}
#Answerthree {
    padding: 8px;
    //background: blue;
    width: 434px;
    float:left;
}
#Answerfour {
    padding: 8px;
    //background: blue;
    width: 434px;
    float:left;
}
#Answerfive {
    padding: 8px;
    //background: blue;
    width: 434px;
    float:left;
}
#Totalpoints {
    padding: 8px;
    //background: blue;
    width: 434px;
    float:left;
    margin-top: 10px;
}
.Points {
    padding: 8px;
    //background: blue;
    width: 20px;
    float:right;
}
.total-points {
    padding: 8px;
    //background: blue;
    width: 20px;
    float:right;
    margin-top: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="Answers">
    <div id="Answerone">tests</div>
    <div class="Points">12</div>
    <div id="Answertwo">tests</div>
    <div class="Points">12</div>
    <div id="Answerthree">tests</div>
    <div class="Points">12</div>
    <div id="Answerfour">tests</div>
    <div class="Points">12</div>
    <div id="Answerfive">tests</div>
    <div class="Points">12</div>
    <div id="TotalPoints"></div>
    <div class="total-points">0</div>
</div>

答案将首先隐藏，如果检测到某个单词将会激活（其中一个答案）。如何使用div.innerHTML格式化文本文档以填充div中的内容？

Answer 1

您可以使用FileReader API读取文本文件，然后通过.innerHTML将内容放入div中。如果您愿意，甚至可以在其中包含HTML语法。

// This is just a pseudo text file!
var txtFile = new Blob(['Hello<br />', ' World!']);

var r = new FileReader();

r.onload = function(e) {
  var content = e.target.result;
  var output = document.getElementById('output');
  output.innerHTML = content;
}

r.readAsText(txtFile);

// You would actually have to load your file first.
/*

var txtFile = "path/to/your/text.txt";
var xhr = new XMLHttpRequest();
xhr.open('GET', txtFile, true);
xhr.responseType = 'blob';

xhr.onload = function(e) {
  if (this.status == 200) {
    var blob = this.response;
    var r = new FileReader();
    r.onload = function(e) {
      var content = e.target.result;
      var output = document.getElementById('output');
      output.innerHTML = content;
    }
    r.readAsText(blob);
  }
};

xhr.send();


*/

<div id="output"></div>

Answer 2

尝试使用text/html文档，.load()填充div元素。

text/html文件

<div class="Answerone">
  Extra stuff
</div>
<div class="Answertwo">
  Extra stuff
</div>
<div class="Answerthree">
  Extra stuff
</div>
<div class="Answerfour">
  Extra stuff
</div>

js

$("#Answerone").load("path/to/html/document .Answerone", function () {
  $(this)
  .html(
    $(this)
    .find(".Answerone")
    .html()
  );
});

jsfiddle http://jsfiddle.net/Lvb01xey/

Javascript在dir中选择随机txt并填充div

2 个答案: