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

Working Code Link

如何使用JavaScript将HTML代码添加到调用函数的对象？

2 个答案: