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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (78)

我在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);
};
提问于
用户回答回答于

不是使用insertAdjacentHTML,直接设置innerHTML。所以你的新功能看起来像:

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

代替

text.insertAdjacentHTML('beforeend', htmlString);

text.innerHTML = htmlString;

扫码关注云+社区

领取腾讯云代金券