jquery - 使用 Jquery，从文本字段中提取文本并将其放入无序列表 onClick

Question

我正在建立一个聊天。我需要使用 Jquery 将用户输入到文本字段中的文本从文本字段中提取出来，并在单击发送按钮时将其放入我的无序列表中。我离得很近吗？

我的错误是这样的（当我查看 Chrome 开发工具时）： Uncaught SyntaxError: Unexpected token ; 但我不知道为什么，如果那是唯一的问题？我查看了我的代码，似乎一切都已关闭

我试着看这里：http ://api.jquery.com/appendTo/ 和这个 SO 帖子。

jquery - 向列表添加值 - 在客户端呈现

 $( document ).ready(function() {
        $("#sendButton").click(function(){
          $('#textbox').val());
            $('<li>'+val+'</li>').appendTo('#ulList');
        });
      };

    </script>


    <h2>Broken Chat</h2>

    <input id="textbox" class="draft" type="text"/> <button id="sendButton" class="send">send</button>

    <ul id="ulList" class="messages">

我最近的努力是尝试将以下内容添加到我现有的代码中：

<li id= "userMessage"></li>

显然改变了我的追加：

$('<li>'+val+'</li>').appendTo('#userMessage');

最后的努力是：

 $('<ul>'+val+'</ul>').appendTo('#ulList');
 <ul id="ulList" class="messages">

如果我问了一个重复的问题，我深表歉意，但我还没有找到有效的答案。如果您在本网站上发现了其他内容，请参考。

Answer 1

你是这个意思吗？

$( document ).ready(function() {
        $("#sendButton").click(function(){
            var val = $('#textbox').val(); //<-- Here
            $('<li>'+val+'</li>').appendTo('#ulList');
        });
 });

这里有语法错误，$('#textbox').val());并且没有对val您可能打算在此语句中的文本框中分配值的变量进行赋值。

演示

Answer 2

你需要用你正在检索的值做一些事情。改变

$('#textbox').val());

到

var val = $('#textbox').val());

运输署

Answer 3

我修复了您的代码中有一些小错别字。

 $( document ).ready(function() {
    $("#sendButton").click(function(){
        var val = $('#textbox').val();
        $('<li>'+val+'</li>').appendTo('#ulList');
    });
 });

工作小提琴

Answer 4

有两个错误。我会用评论指出它们。我有太多 ) 标记，并且我没有定义 val。查找 //here// 并将该行与我原来的问题进行比较。

$( document ).ready(function() {
    $("#sendButton").click(function(){
  //Here//    var val = $('#textbox').val(); //Here//
        $('<li>'+val+'</li>').appendTo('#ulList');
    })
  });

</script>


<h2>Broken Chat</h2>

<input id="textbox" class="draft" type="text"/> <button id="sendButton" class="send">send</button>

<ul id="ulList" class="messages">
  <li id= "userMessage"></li>
</ul>