Javascript 将（）文本值追加到div onclick（）中_Javascript_Jquery

Javascript 将（）文本值追加到div onclick（）中

javascript jquery

Javascript 将（）文本值追加到div onclick（）中,javascript,jquery,Javascript,Jquery,我正在使用jquery创建一个即时通讯器，在点击“发送”按钮后，我很难将键入的消息接收到消息字段中我有html <body> <div class="main-window"> <div class="chat-screen"></div> <div class="bottom-wrapper"> <input class="text-bar"></input&

我正在使用jquery创建一个即时通讯器，在点击“发送”按钮后，我很难将键入的消息接收到消息字段中

我有html

<body>
    <div class="main-window">
    <div class="chat-screen"></div>
        <div class="bottom-wrapper">
            <input class="text-bar"></input>
            <input type="button" value="Send"class="send-btn">Send</input>
        </div>
    </div>                
<body>

但它似乎不起作用。有人能给我指一下正确的方向吗

您需要

改变

$(".text-bar").text()

到

你的代码变成了

使用

清除文本框并在新行中新建聊天

$(document).ready(function () {
    var chat_screen = $(".chat-screen");
    var text_bar = $(".text-bar")
    $('.send-btn').click(function () {
        chat_screen.append(text_bar.val() + '<br/>');
        text_bar.val('');
    });
});

$（文档）.ready（函数（）{
var chat_screen=$（“.chat screen”）；
var text_bar=$（“.text bar”）
$（'.send btn'）。单击（函数（）{
chat_screen.append（text_bar.val（）+'
）；
文本_bar.val（“”）；
});
});

您需要

改变

$(".text-bar").text()

到

你的代码变成了

使用

清除文本框并在新行中新建聊天

$(document).ready(function () {
    var chat_screen = $(".chat-screen");
    var text_bar = $(".text-bar")
    $('.send-btn').click(function () {
        chat_screen.append(text_bar.val() + '<br/>');
        text_bar.val('');
    });
});

$（文档）.ready（函数（）{
var chat_screen=$（“.chat screen”）；
var text_bar=$（“.text bar”）
$（'.send btn'）。单击（函数（）{
chat_screen.append（text_bar.val（）+'
）；
文本_bar.val（“”）；
});
});

试试这个

 $('.send-btn').click(function(){
    $('.chat-screen').append($(".text-bar").val());
    });

试试这个

 $('.send-btn').click(function(){
    $('.chat-screen').append($(".text-bar").val());
    });

.text（）

（和correct

.val（）

）函数返回字符串，而不是jQuery对象，因此它们上没有可用的

appendTo（）

函数。您需要这样做：

$('.chat-screen').append($('.text-bar').val());

另外，如果脚本位于HTML页面的

中，或者位于元素的实际HTML之前，请确保将其包装在DOM就绪处理程序中：

$(document).ready(function() {
    $('.send-btn').click(function(){
        $('.chat-screen').append($('.text-bar').val());
    });
});

当然，还要检查jQuery是否正确加载（它根本不在JSFIDLE中）

由于这将（可能）运行很多次，因此您希望缓存聊天屏幕和文本输入的选择器，如下所示：

$(document).ready(function() {
    var $chatscreen = $('.chat-screen'),
        $textbar = $('.text-bar');
    $('.send-btn').click(function(){
        $chatscreen.append($textbar.val());
        $textbar.val('');
    });
});

函数

.text（）

（和correct

.val（）

）返回字符串，而不是jQuery对象，因此它们上没有可用的

appendTo（）

函数。您需要这样做：

$('.chat-screen').append($('.text-bar').val());

另外，如果脚本位于HTML页面的

中，或者位于元素的实际HTML之前，请确保将其包装在DOM就绪处理程序中：

$(document).ready(function() {
    $('.send-btn').click(function(){
        $('.chat-screen').append($('.text-bar').val());
    });
});

当然，还要检查jQuery是否正确加载（它根本不在JSFIDLE中）

由于这将（可能）运行很多次，因此您希望缓存聊天屏幕和文本输入的选择器，如下所示：

$(document).ready(function() {
    var $chatscreen = $('.chat-screen'),
        $textbar = $('.text-bar');
    $('.send-btn').click(function(){
        $chatscreen.append($textbar.val());
        $textbar.val('');
    });
});

这里是您的小提琴更新：

使用

val（）

代替

text（）

这里是您的小提琴更新：

使用

val（）

代替

text（）

$（'.send btn'）。单击（函数（）{
//$（“.text bar”）.val（）.appendTo（“.chat screen”）；
$（“.chat screen”）.append（$（“.text bar”）.val（））
$（“.chat screen”）.append（“
”）
});

请参见

$（'.send btn'）。单击（函数（）{
//$（“.text bar”）.val（）.appendTo（“.chat screen”）；
$（“.chat screen”）.append（$（“.text bar”）.val（））
$（“.chat screen”）.append（“
”）
});

请参见以下几个问题：

在输入中的

值

和

类

属性之间添加空格

将

.text（）

更改为

.val（）

——输入没有文本节点，只有值

使用

$（'.chat screen'）.append（$（“.text bar”）.val（））


确保包含jQuery
请参阅更新的fiddle几期：
在输入中的值
和类
属性之间添加空格
将.text（）
更改为.val（）
——输入没有文本节点，只有值
使用$（'.chat screen'）.append（$（“.text bar”）.val（））

确保包含jQuery
查看更新的fiddle实际上，您确实应该附加一个html标记，而不仅仅是文本。我是说，你可以，但不应该
我的建议是：
为消息创建基本容器，如：
       <div class="message-container" style="display:none;"> 
          <span class="message"> </span>
       </div>

实际上，您确实应该附加一个html标记，而不仅仅是文本。我是说，你可以，但不应该
我的建议是：
为消息创建基本容器，如：
       <div class="message-container" style="display:none;"> 
          <span class="message"> </span>
       </div>

附加文本和下拉值sametime
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
//var x=$("#cars option:selected").text();
//var y=$("#bus").val();
//alert(''+x+'     '+y+'');
$(".chat-screen2").append($("#cars").val()+'<br/>');
 $(".chat-screen").append($("#bus").val()+'<br/>');
 $("#bus").val('');
 });
 });
</script>
</head>
<body>


  <select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <input id="bus" type="text">
  <button type="submit">submit</button>
  <br><br>
  <div class="chat-screen2" style="float:left;"></div>
  <div class="chat-screen" style="float:left;margin-left:10px;"></div>
</body>
</html>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
//var x=$（“#车辆选项：已选定”）.text（）；
//变量y=$（“#总线”）.val（）；
//警报（“”+x+“”+y+“”）；
$（“.chat-screen2”）.append（$（“#cars”）.val（）+”
）；
$（“.chat screen”）.append（$（“#总线”）.val（）+”
）；
$（“#总线”）.val（“”）；
});
});
沃尔沃汽车
萨博
法令
奥迪
提交



附加文本和下拉值sametime
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
//var x=$("#cars option:selected").text();
//var y=$("#bus").val();
//alert(''+x+'     '+y+'');
$(".chat-screen2").append($("#cars").val()+'<br/>');
 $(".chat-screen").append($("#bus").val()+'<br/>');
 $("#bus").val('');
 });
 });
</script>
</head>
<body>


  <select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <input id="bus" type="text">
  <button type="submit">submit</button>
  <br><br>
  <div class="chat-screen2" style="float:left;"></div>
  <div class="chat-screen" style="float:left;margin-left:10px;"></div>
</body>
</html>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
//var x=$（“#车辆选项：已选定”）.text（）；
//变量y=$（“#总线”）.val（）；
//警报（“”+x+“”+y+“”）；
$（“.chat-screen2”）.append（$（“#cars”）.val（）+”
）；
$（“.chat screen”）.append（$（“#总线”）.val（）+”
）；
$（“#总线”）.val（“”）；
});
});
沃尔沃汽车
萨博
法令
奥迪
提交



还是运气不好。firebug@maheshmajeti中的值甚至没有改变，但仍然没有运气。firebug@MaheshMajetiIt中的值甚至没有改变，谢谢。在发送消息后，如何清除输入框@Tushar Gupta$（'.text bar'）.val（''）@sMilbz$（“.text bar”）.val（“”）谢谢。我怎样才能在新的线路上获得下一条信息@Praveen@Praveen谢谢你的帮助：）它很管用，谢谢。在发送消息后，如何清除输入框@Tushar Gupta$（'.text bar'）.val（''）@sMilbz$（“.text bar”）.val（“”）谢谢。我怎样才能在新的线路上获得下一条信息@Praveen@Praveen谢谢你的帮助：）