使用 JavaScript 在 for 循环中创建按钮

creating button in for loop using javascript

本文关键字：创建 按钮 循环 for JavaScript 使用      更新时间：2023-09-26

我将参数发送到服务器，它用数组对象响应我。我得到它并使用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>

我通过一些更改解决了这个问题。我评论人造丝提供的台词。它工作得很好。

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);

好吧，在您的情况下，您正在尝试访问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>

相关文章：