如何使用JavaScript将HTML代码添加到对象中，其中调用了函数？

Question

我这里有一个简单的HTML代码：

 (function() { })(); var taskGroups; var amount = document.getElementById("results").length; function createGroup() { var groupName = document.getElementById('groupName').value; if (groupName.length !== 0) { var group = { data: '<div class="card col-md-4">\\n' + ' <ul class="list-group list-group-flush" id="taskList">\\n' + ' <li class="list-group-item">\\n' + ' <form onsubmit="createTask();">\\n' + ' <div class="form-group" action="#">\\n' + ' <label>' + groupName + '</label>\\n' + ' <input type="text" class="form-control" required id="taskName" aria-describedby="emailHelp" placeholder="Type task name">\\n' + ' </div>\\n' + ' </form>\\n' + ' <button id="createButton" class="btn btn-success" onclick="createTask();">Add\\n</button>' + ' </li>' + ' </ul>\\n' + ' </div>', index: ''} document.querySelector("#results").innerHTML = document.querySelector("#results").innerHTML + group.data; } document.getElementById('groupName').value = ''; }; function createTask() { var taskName = document.getElementById('taskName').value; if (taskName.length !== 0) { var task = '<li class="list-group-item task">' + taskName + '</li>'; document.querySelector("#taskList").innerHTML = document.querySelector("#taskList").innerHTML + task; } }; 

 <div class="container"> <div class="row" id="content"> <div id="results"></div> <div class="card col-md-4"> <ul class="list-group list-group-flush "> <li class="list-group-item list-group-item list-group-item-success"> <form onsubmit="createGroup();return false;"> <div class="form-group"> <label>Task group name</label> <input type="text" class="form-control" required id="groupName" aria-describedby="emailHelp" placeholder="Type group name"> </div> </form> <button id="createButton" class="btn btn-success" onclick="createGroup();">Create</button> </li> </ul> </div> </div> </div> 

所以它以这种方式工作：你已经在HTML代码中创建的表单创建卡片，您可以在其中添加<li>Some text from 1st form</li> ，用于您使用该表单的当前卡片。 不幸的是，它仅适用于您添加的第一张卡，其他卡不可用。 我知道我应该以某种方式使用this ，但我真的不知道如何......

我可以根据需要添加群组。 但我只能为第一个添加名称......

我也不能使用任何库，框架等。

Answer 1

问题出在这一行

var taskName = document.getElementById('taskName').value;

在html中， id是唯一的，具体的。 你不能第二次使用它，或者只选择第一个<element id='taskName'> 。

因此，要解决您的问题，您可以为每个组分配一个新ID。

喜欢

var group_count = 0;
function createGroup() {
    var groupName = document.getElementById('groupName').value;
    if (groupName.length !== 0) {
        var group = { data: '<div class="card col-md-4">\n' +
            '            <ul class="list-group list-group-flush" id="taskList' + group_count + '">\n' +
            '                <li class="list-group-item">\n' +
            '                    <form onsubmit="createTask(' + group_count + ');">\n' +
            '                        <div class="form-group" action="#">\n' +
            '                            <label>' + groupName + '</label>\n' +
            '                            <input type="text" class="form-control" required id="taskName' + group_count + '" aria-describedby="emailHelp" placeholder="Type task name">\n' +
            '                        </div>\n' +
            '                    </form>\n' +
            '                    <button id="createButton" class="btn btn-success" onclick="createTask(' + group_count + );">Add\n</button>' +
            '                </li>' +
            '            </ul>\n' +
            '        </div>',
                    index: ''}
        document.querySelector("#results").innerHTML = document.querySelector("#results").innerHTML + group.data;
    }
    document.getElementById('groupName').value = '';
    group_count++;
};

在createTask中

function createTask(num) {
    var taskName = document.getElementById('taskName' + num).value;
    if (taskName.length !== 0) {
        var task = '<li class="list-group-item task">' + taskName + '</li>';
        document.querySelector("#taskList" + num).innerHTML = document.querySelector("#taskList" + num).innerHTML + task;
    }
};

Answer 2

用户MatrixTai是正确的问题是你有所有具有相同id的元素，所以你需要给它们不同的id，或者你可以使用parentNode属性来选择相对于被点击的项目的元素。 所以只需将事件函数参数传递给click函数并使用它来获取parentNode。

修改JS：

(function() {
 })();

var taskGroups;

var amount = document.getElementById("results").length;



function createGroup() {

    var groupName = document.getElementById('groupName').value;

    if (groupName.length !== 0) {

    var group = { data: '<div class="card col-md-4">\n' +
    '            <ul class="list-group list-group-flush" id="taskList">\n' +
    '                <li class="list-group-item">\n' +
    '                    <form onsubmit="createTask();">\n' +
    '                        <div class="form-group" action="#">\n' +
    '                            <label>' + groupName + '</label>\n' +
    '                            <input type="text" class="form-control" required id="taskName" aria-describedby="emailHelp" placeholder="Type task name">\n' +
    '                        </div>\n' +
    '                    </form>\n' +
    '                    <button id="createButton" class="btn btn-success" onclick="createTask(this);">Add\n</button>' +
    '                </li>' +
    '            </ul>\n' +
    '        </div>',
            index: ''}

    document.querySelector("#results").innerHTML = 
    document.querySelector("#results").innerHTML + group.data;

    }

    document.getElementById('groupName').value = '';

    };


   function createTask(e) {

   var taskName = e.parentNode.querySelector('#taskName').value;
   if (taskName.length !== 0) {
       var task = '<li class="list-group-item task">' + taskName + '</li>';
       e.parentNode.parentNode.parentNode.querySelector("#taskList").innerHTML += task;
    }
  }

工作代码链接