单击按钮时用新文本替换文本
单击按钮时用新文本替换文本
提问于 2018-06-08 02:44:01
我有3个数据在JSON文件中，并希望每个数据显示在一个单一的click.The的1个1的问题是以前的数据没有被新的数据被取代的按钮被点击。他们最终并排在一起(下图)。我该如何克服这个问题？提前谢谢。
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);
};回答 2
Stack Overflow用户
发布于 2018-06-08 02:46:03
而不是
text.insertAdjacentHTML('beforeend', htmlString);只需使用
text.innerHTML = htmlString;insertAdjacentHTML不会取代html。
Stack Overflow用户
发布于 2018-06-08 02:46:13
直接设置innerHTML而不是使用insertAdjacentHTML。因此，您的新函数将如下所示：
function renderHTML(data) {
var htmlString =data[i].quote;
i++;
i %= data.length; // new
text.innerHTML = htmlString; // changed
}我还插入了行i %= data.length;，这样您就不会离开数组的末尾，而是循环到data的开头。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50748209
复制相关文章
相似问题