单击按钮时用新文本替换文本

Question

我在JSON文件中有3个数据，并且希望每次只能单击一个数据显示每个数据。问题是，当按钮单击时，之前的数据被新数据替换。他们最终并排（图片如下）。我该如何克服这个问题？提前致谢。

JSON文件

[
  {"quote": "Everyday Is A New Day"},
  {"quote": "Trust Your Guts"},
  {"quote": "All The Best"}
]

HTML

<p id="text"></p>
<button id="btn">GENERATE</button>

JAVASCRIPT

var text = document.getElementById("text");
var btn = document.getElementById("btn");
var i=0;

btn.addEventListener("click", function() {
  var ourRequest = new XMLHttpRequest();
  ourRequest.open('GET', 'data2.json');
  ourRequest.onload = renderHTML;
  ourRequest.send();
});

function renderHTML(data) {
  var htmlString =data[i].quote;
  i++;
  text.insertAdjacentHTML('beforeend', htmlString);
};

Answer 1

而不是

text.insertAdjacentHTML('beforeend', htmlString);

只需使用

text.innerHTML = htmlString;

insertAdjacentHTML不会替换html。

Answer 2

不要使用insertAdjacentHTML，而是直接设置innerHTML。所以你的新功能看起来像：

function renderHTML(data) {
var htmlString =data[i].quote;
i++;
i %= data.length;            // new
text.innerHTML = htmlString; // changed
}

我还插入了行i %= data.length;，因此您不会离开数组的末尾，而是循环到data的开头。