Question

<div class="col-md-3 list">
                <form style="width:300px;">
                    <span>Add a list…</span>
                    <input id="list_id" type="text" name="list_name" placeholder="Add a list…" autocomplete="off">
                    <div>
                        <input type="submit" value="Save" onclick="addList(document.getElementById('list_id').value);">
                        <i class="fa fa-times"></i>
                    </div>
                </form>
            </div>    

<div class="list" id="board">
        <div id="todo">
            content
        </div>
    </div>

内容不是在dom中添加..它即将到来，但过了一段时间后才开始。请帮忙!!

var lists = [];
    var items = [];

    function addList(val) {

        //var e = document.getElementById('list_id');
        //var val = e.value;
        // Do the rest here
        /*
        <div class="list">
                <div class="list-header js-list-header non-empty u-clearfix editable">
                    <h2 class="list-header-name hide-on-edit js-list-name current">hsdfds</h2>
                    <p class="list-header-num-cards hide js-num-cards">0 cards</p>
                    <span class="list-header-subscribe-icon icon-sm icon-subscribe js-list-subscribed hide"></span>
                    <div class="edit edit-heavy u-clearfix">
                        <textarea class="field single-line" type="text"></textarea>
                    </div>
                    <a class="list-header-menu-icon icon-sm icon-dropdown-menu dark-hover js-open-list-menu" href="#"></a>
                </div>
                <div class="list-cards u-fancy-scrollbar u-clearfix js-list-cards js-sortable ui-sortable"></div>
                <a class="open-card-composer js-open-card-composer" href="#">Add a items�</a>
            </div>
        */

        lists.push(val);

        var cartHTML = '<div class="list">';
        cartHTML += '<div class="list-header js-list-header non-empty u-clearfix editable">';
        cartHTML += '<h2 class="list-header-name hide-on-edit js-list-name current">' + val + '</h2>';
        cartHTML += '<p class="list-header-num-cards hide js-num-cards">0 cards</p><div class="edit edit-heavy u-clearfix"><textarea class="field single-line" type="text"></textarea></div>';
        cartHTML += '<div class="list-cards u-fancy-scrollbar u-clearfix js-list-cards js-sortable ui-sortable"></div><a class="open-card-composer js-open-card-composer" href="#">Add a items�</a>';
        cartHTML += '</div></div>';

        addListsContent(cartHTML);

        //return true;
    }

    function addListsContent(cartHTML) {
        document.getElementById('todo').innerHTML = cartHTML; //cartHTML;
    }

Answer 1

您的代码中有错误

您正在将document.getElementById('list_id')（一个html元素）传递给函数addList，但您正尝试在字符串'<h2 class="list-header-name hide-on-edit js-list-name current">' + val + '</h2>'中显示它。

如果要将值传递给函数/数组，则需要传递document.getElementById('list_id').value。

通过此更改，它可以按照您的预期运行。并且可能重命名变量以便它有意义等等。

您还使用了提交按钮作为点击处理程序。默认行为是提交/刷新页面。您需要一个按钮来停止页面刷新，因为您没有阻止默认。这是一个working fiddle

Answer 2

我想知道两件事 -

您的按钮属于提交类型，因此它正在提交您的表单。你想提交吗？
为什么在构建html字符串时传递“val”？我相信您想要添加该文本输入的值，这可以作为val.value来完成。

所以我想删除“提交”类型并添加val.value会对你有帮助。

var lists = [];
    var items = [];

    function addList(val) {

        //var e = document.getElementById('list_id');
        //var val = e.value;
        // Do the rest here
        /*
        <div class="list">
                <div class="list-header js-list-header non-empty u-clearfix editable">
                    <h2 class="list-header-name hide-on-edit js-list-name current">hsdfds</h2>
                    <p class="list-header-num-cards hide js-num-cards">0 cards</p>
                    <span class="list-header-subscribe-icon icon-sm icon-subscribe js-list-subscribed hide"></span>
                    <div class="edit edit-heavy u-clearfix">
                        <textarea class="field single-line" type="text"></textarea>
                    </div>
                    <a class="list-header-menu-icon icon-sm icon-dropdown-menu dark-hover js-open-list-menu" href="#"></a>
                </div>
                <div class="list-cards u-fancy-scrollbar u-clearfix js-list-cards js-sortable ui-sortable"></div>
                <a class="open-card-composer js-open-card-composer" href="#">Add a items�</a>
            </div>
        */

        lists.push(val);

        var cartHTML = '<div class="list">';
        cartHTML += '<div class="list-header js-list-header non-empty u-clearfix editable">';
        cartHTML += '<h2 class="list-header-name hide-on-edit js-list-name current">' + val.value + '</h2>';
        cartHTML += '<p class="list-header-num-cards hide js-num-cards">0 cards</p><div class="edit edit-heavy u-clearfix"><textarea class="field single-line" type="text"></textarea></div>';
        cartHTML += '<div class="list-cards u-fancy-scrollbar u-clearfix js-list-cards js-sortable ui-sortable"></div><a class="open-card-composer js-open-card-composer" href="#">Add a items�</a>';
        cartHTML += '</div></div>';

        addListsContent(cartHTML);

        //return true;
    }

    function addListsContent(cartHTML) {
        document.getElementById('todo').innerHTML = cartHTML; //cartHTML;
    }

<div class="col-md-3 list">
                <form style="width:300px;">
                    <span>Add a list…</span>
                    <input id="list_id" type="text" name="list_name" placeholder="Add a list…" autocomplete="off">
                    <div>
                        <input type="button" value="Save" onclick="addList(document.getElementById('list_id'));">
                        <i class="fa fa-times"></i>
                    </div>
                </form>
            </div>    

<div class="list" id="board">
        <div id="todo">
            content
        </div>
    </div>

innerHTML无法在javascript中运行

2 个答案: