下面的代码用于创建一些简单的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
});
发布于 2018-06-27 05:50:25
这里有一个问题
document.getElementsByClassName('change').innerHTML = string
getElementsByClassName
返回一个类似数组的对象(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>
发布于 2018-06-27 05:51:37
试试这样的东西
window.addEventListener("DOMContentLoaded", function(event) {
//do work
});
https://stackoverflow.com/questions/51051780
复制相似问题