字符串未定义并在控制台中执行(从json到html)
字符串未定义并在控制台中执行(从json到html)
提问于 2018-06-27 05:46:46
下面的代码用于创建一些简单的JSON数据，并将其迭代到页面的HTML中。
问题是此代码在不使用on load函数的情况下返回'string‘未定义的错误。
有了on load函数，它似乎被忽略了，根本不执行(没有错误)，但是，当我将以下代码直接添加到浏览器控制台时，它执行得很好。
有什么想法吗？
window.addEventListener('load', function() {
var json =[{
"Name": "sample data",
"Type": "lorem ip sum lorem sample",
"DateModified": "6/14/2218 17:22:50",
"Size": "2 KB",
}, {
"Name": "sample Q",
"Type": "lorem ipsum",
"DateModified": "5/11/2218 7:32:10",
"Size": "6999 KB",
}, {
"Name": "sample x",
"Type": "blah blah",
"DateModified": "6/26/2218 10:29:59",
"Size": "8999 KB",
},
];
var string ="";
for (i in json) {
string +='<div class="row"><div class="col-md-15 col-sm-1"><input type="checkbox" id="all" name="all" value="all"></div><div class="col-md-15 col-sm-4"><span class="folders">'+json[i].Name+'</span></div><div class="col-md-15 col-sm-3"><span class="directory">'+json[i].Type+'</span></div><div class="col-md-15 col-sm-3"><span class="date-stamp">'+json[i].DateModified+'</span></div><div class="col-md-15 col-sm-1"><span class="date-size">'+json[i].Size+'</span></div></div>';
};
document.getElementsByClassName('change').innerHTML =string
});回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-27 05:50:25
这里有一个问题
document.getElementsByClassName('change').innerHTML = stringgetElementsByClassName返回一个类似数组的对象(HTMLCollection)，并且需要一个索引，例如
document.getElementsByClassName('change')[0].innerHTML = string如前所述，使用for..in循环数组并不好(它是用于对象的)，因此在这里我使用forEach__，而不是getElementsByClassName，我使用
堆栈代码段
window.addEventListener('load', function() {
var json =[{
"Name": "sample data",
"Type": "lorem ip sum lorem sample",
"DateModified": "6/14/2218 17:22:50",
"Size": "2 KB",
}, {
"Name": "sample Q",
"Type": "lorem ipsum",
"DateModified": "5/11/2218 7:32:10",
"Size": "6999 KB",
}, {
"Name": "sample x",
"Type": "blah blah",
"DateModified": "6/26/2218 10:29:59",
"Size": "8999 KB",
},
];
var string ="";
json.forEach( function(item) {
string +='<div class="row"><div class="col-md-15 col-sm-1"><input type="checkbox" id="all" name="all" value="all"></div><div class="col-md-15 col-sm-4"><span class="folders">'+item.Name+'</span></div><div class="col-md-15 col-sm-3"><span class="directory">'+item.Type+'</span></div><div class="col-md-15 col-sm-3"><span class="date-stamp">'+item.DateModified+'</span></div><div class="col-md-15 col-sm-1"><span class="date-size">'+item.Size+'</span></div></div>';
});
document.querySelector('.change').innerHTML = string
});<div class="change"></div>
Stack Overflow用户
发布于 2018-06-27 05:51:37
试试这样的东西
window.addEventListener("DOMContentLoaded", function(event) {
//do work
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51051780
复制相关文章
相似问题