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

【问题标题】：Use Jquery, pull text out of textfield and put it in unordered list onClick使用 Jquery，从文本字段中提取文本并将其放入无序列表 onClick
【发布时间】：2013-06-03 05:19:13
【问题描述】：

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

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

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

jquery - adding a value to a list - rendering on the client side

 $( 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">

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

【问题讨论】：

这一行中的额外括号 $('#textbox').val()); 和 document 函数的结尾应该是 }); 而不是 };。
谢谢。几乎明白了，虽然现在 Val 没有定义。有什么建议可以定义 val 而不会搞砸其他任何事情吗？我......非常NOOb-ish......我以为它被定义了？？
在下面查看我的答案

标签： jquery html-lists chat textfield

【解决方案1】：

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

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

Working fiddle

【讨论】：

谢谢。我会试一试。我还需要 devine val 吗？
@john ofcourse.. 如果您不想一次又一次地定义它，请将其保留为全局变量。
@Mr_Green ，不必是全局变量，只需在 .click() 事件处理程序之外定义即可。
@AbijeetPatro 是的，我的意思是一样的。只是不能像你那样改写:)

【解决方案2】：

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

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

到

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

【讨论】：

它工作！感谢大家！我希望我能支持你的答案，但我的排名还不够高。非常感谢
@john 我建议你试试 Firefox 和 Firebug。虽然 Chrome 是我最喜欢的浏览器，但对于开发来说，Firefox 和 Firebug 要好得多。我相信即使您没有足够的代表来投票，您也可以接受答案。我认为接受答案也会增加你的代表。

【解决方案3】：

你是这个意思吗？

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

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

Demo

【讨论】：

更近了！我所有其他的东西现在都可以工作了，但是现在当我尝试点击发送按钮时，我得到了这个： Uncaught ReferenceError: val is not defined chatApp.html:57 (anonymous function) chatApp.html:57 le.event.dispatch ChatBuilder.js :2 b.handle
@john 你能用小提琴复制它吗？哪一行导致错误。尝试调试脚本。
不好意思说还没调试。让我快速搜索一下小提琴是什么。如何给 val 赋值？？？
哇，那个小提琴太酷了！哈哈。感谢您与我分享。

【解决方案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>

【讨论】：