Question

我正在尝试获取输入字段的内容并将其添加到我的HTML文档中。

这就是我所拥有的，但它不起作用，但是：

            <!DOCTYPE html>
    <html>
        <head>
            <title>To Do</title>
            <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
            <script type="text/javascript" src="script.js"></script>
        </head>
        <body>
            <h2>To Do</h2>
            <form name="checkListForm">
                <input type="text" name="checkListItem"/>
            </form>
            <div id="button">Add!</div>
            <br/>
            <div class="list"></div>
        </body>
    </html>

            $(document).ready(function(){
        var input = $("input[name=checkListItem]");
        $("button").click(function(){
    $("#button").click(function(){   

var toAdd = $('input[name=checkListItem]').val();
    });
            $(".list").append('<div class="item">' + toAdd + '</div>');
        });
    });

有人能告诉我我做错了吗？

谢谢！

Answer 1

你有一些错误：

1）$("button")应为$("#button")

2）$("input[name=checkListItem]")应为$("input[name='checkListItem']")

3）将var input = $("input[name='checkListItem']").val();放入点击事件

并且这样做：

$(document).ready(function(){

    $("#button").click(function(){

       var input = $("input[name='checkListItem']").val(); 
       // .val() will give textbox value

       $(".list").append('<div class="item">' + input + '</div>');
     });

}）;

Fiddle Example

或更简单：

$(document).ready(function(){

   $("#button").click(function(){

    $(".list").append('<div class="item">' + $("input[name='checkListItem']").val()+ '</div>');

   });

});

Answer 2

$(document).ready(function(){
    var input = $("input[name=checkListItem]").val();
    $("#button").click(function(){
        $(".list").append('<div class="item">' + input + '</div>');
    });
});

按钮是一个div，而不是一个html元素，所以添加＃

获取输入字段内容并附加到HTML <div>元素</div>

2 个答案: