[英]creating button in for loop using javascript
我將參數發送到服務器,它使用數組對象響應我。 我得到它並使用JSON.stringify
函數,然后使用JSON.parse
。 當我在主體中分配按鈕時,盡管未正確放置在html中,但它仍可以正常工作。 如果我分配給迭代id
,則會出現錯誤。 我應該怎么做才能解決該問題,並發生單擊事件以刪除當前項目並將其刪除。 這是我的代碼:
<script>
var param={user_id: localStorage.getItem('user_id')};
getmyItems(param,function(data){
var mtItem=JSON.stringify(data);
myItem=JSON.parse(mtItem);
console.log(myItem);
var Item=document.getElementById('myItems');
var buffer="";
for(var i=0;i<myItem.results.length;i++){
buffer +='<div class="row">';
buffer +='<div class="col-md-12">';
buffer +='<img src="'+myItem.results[i].images+'"/>';
buffer +='</div>';
buffer +='</div>';
buffer +='<div class="row">';
buffer +='<div class="col-md-4">';
buffer +='Created on:'+myItem.results[i].creation_date;
buffer +='</div>';
buffer +='<div class="col-md-4">';
buffer +='incident_date:'+myItem.results[i].item_date;
buffer +='</div>';
buffer += '<div class="col-md-4">';
buffer +='approval_date:'+myItem.results[i].approved_date;
buffer +='</div>';
buffer +='</div>';
buffer+='<div class="row">';
buffer+='<div class="col-md-12">';
buffer+='Title: '+myItem.results[i].title;
buffer+='</div>';
buffer+='</div>';
buffer+='<div class="row" id="'+i+'">';
var btn=document.createElement('input');
btn.setAttribute('type','button');
btn.setAttribute('class','btn btn-danger');
btn.value="Delete";
btn.onclick=(function (i){
return function(){
doDelete(myItem.results[i].item_id);
};
})(i);
document.getElementById('i').appendChild(btn);
buffer+='</div><hr/>';
}
Item.innerHTML=buffer;
});
function doDelete(s){
var param={
user_id: localStorage.getItem('user_id'),
session: sessionStorage.getItem('session'),
item_id: s
};
deleteItem(param, function(data){
alert(JSON.stringify(data));
});
}
</script>
好吧,根據您的情況,您正在嘗試訪問
DOM
不存在的元素
與其在循環末尾創建buffer
和設置innerHTML
,不如創建div
元素並將buffer
元素設置為所創建div
元素的innerHTML
。 appendChild
是for-loop
的buffer
元素,此后,您可以訪問id
為變量i
的元素
嘗試這個:
var myItem = { success: true, error_cod: 0, results: [{ title: "flood", creation_date: "2016/01/01" }, { title: "earthquake", creation_date: "2016/01/05" }] }; var Item = document.getElementById('myItems'); for (var i = 0; i < myItem.results.length; i++) { var buffer = ""; buffer += '<div><div class="row">'; buffer += '<div class="col-md-12">'; buffer += '<img src="' + myItem.results[i].title + '"/>'; buffer += '</div>'; buffer += '</div>'; buffer += '<div class="row">'; buffer += '<div class="col-md-4">'; buffer += 'Created on:' + myItem.results[i].creation_date; buffer += '</div>'; buffer += '<div class="col-md-4">'; buffer += 'incident_date:' + myItem.results[i].creation_date; buffer += '</div>'; buffer += '<div class="col-md-4">'; buffer += 'approval_date:' + myItem.results[i].creation_date; buffer += '</div>'; buffer += '</div>'; buffer += '<div class="row">'; buffer += '<div class="col-md-12">'; buffer += 'Title: ' + myItem.results[i].title; buffer += '</div>'; buffer += '</div>'; buffer += '<div class="row" id="' + i + '">'; buffer += '</div><hr/></div>'; var div = document.createElement('div'); div.innerHTML = buffer; var elem = div.firstChild; Item.appendChild(elem); var btn = document.createElement('input'); btn.setAttribute('type', 'button'); btn.setAttribute('class', 'btn btn-danger'); btn.value = "Delete"; btn.onclick = (function(i) { return function() { doDelete(myItem.results[i].creation_date); }; })(i); document.getElementById(i).appendChild(btn); } function doDelete(s) { alert(s); }
<div id="myItems"></div>
我稍作改動即可解決問題。 我評論了Rayon提供的內容。 效果很好。
var div = document.createElement('div');
div.innerHTML = buffer;
//var elem = div.firstChild;
Item.appendChild(div);
var btn = document.createElement('input');
btn.setAttribute('type', 'button');
btn.setAttribute('class', 'btn btn-danger');
btn.value = "Delete";
btn.onclick = (function(i) {
return function() {
doDelete(myItem.results[i].item_id);
};
})(i);
Item.appendChild(btn);
//document.getElementById(i).appendChild(btn);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.