Send textarea text to div

Navigation
0

$(document).ready(function(){


$('textarea').keypress(
function(e){
    if (e.keyCode == 13) {
        var msg = $(this).val();
        $(this).val('');
        if(msg!='')

        $('<div class="msg_b">'+msg+'</div>').insertBefore('.msg_push');
        $('.msg_body').scrollTop($('.msg_body')[0].scrollHeight);
    }
});

If the "msg_b" div is written in direct HTML in the body the script works, but in this specific case I need the "msg_b" div to be a js element and thus I can not get the ENTER to send the entered text in the textarea for the div. 

  var element = '<div class="popup-box chat-popup" id="'+ id +'">';
            element = element + '<div class="popup-head">';
            element = element + '<div class="popup-head-left">'+ username +'</div>';
            element = element + '<div class="popup-head-right"><a href="javascript:close_popup(\''+ id +'\');">&#10005;</a></div>';
            element = element + '<div style="clear: both"></div></div><div class="popup-messages"><div class="msg_body"><div class="msg_a">This is from A   </div><div class="msg_b">This is from B</div><div class="msg_push"></div></div></div><div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div></div>';








            document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;

If these divs exit from within this element and stay in HTML itself Textarea text message already goes into the "msg_b" div. 

<div class="msg_box" style="right:290px">
<div class="msg_head">User
<div class="close">x</div>
</div>
<div class="msg_wrap">
    <div class="msg_body">
        <div class="msg_a">This is from A   </div>
        <div class="msg_b">This is from B, and its amazingly kool nah... i know it even i liked it :)</div>

        <div class="msg_push"></div>
    </div>
<div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div>

    
asked by anonymous 13.12.2015 / 23:11

1 answer

1

See if this solves your problem: 

var username = "João"; //exemplo
var id = "_qrt4"; //exemplo
var element = '<div class="popup-box chat-popup" id="'+ id +'">';
            element = element + '<div class="popup-head">';
            element = element + '<div class="popup-head-left">'+ username +'</div>';
            element = element + '<div class="popup-head-right"><a href="javascript:close_popup(\''+ id +'\');">&#10005;</a></div>';
            element = element + '<div style="clear: both"></div></div><div class="popup-messages"><div class="msg_body"><div class="msg_a">This is from A   </div><div class="msg_b">This is from B</div><div class="msg_push"></div></div></div><div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div></div>'

$('body').append(element) //Adiciona o elemento como um child

$('textarea').keypress(
function(e){
    if (e.keyCode == 13) {
        var msg = $(this).val();
        if(msg!=''){// Como mais de uma linha no if, os colchetes são necessários
            $('<div class="msg_b">'+msg+'</div>').insertBefore('.msg_push');
            $('.msg_body').scrollTop($('.msg_body')[0].scrollHeight);
        }
        $(this).val(''); //O esvaziamento deve ocorrer ao final de tudo
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Hereisthemethod append() . Basically it works like this: 

 elementoPai.append('aqui virá um novo filho ao elemento pai');

It could be written in the same way as your example: 

var username = "João";
var id = "_qrt4";
var element = '<div class="popup-box chat-popup" id="'+ id +'">';
            element = element + '<div class="popup-head">';
            element = element + '<div class="popup-head-left">'+ username +'</div>';
            element = element + '<div class="popup-head-right"><a href="javascript:close_popup(\''+ id +'\');">&#10005;</a></div>';
            element = element + '<div style="clear: both"></div></div><div class="popup-messages"><div class="msg_body"><div class="msg_a">This is from A   </div><div class="msg_b">This is from B</div><div class="msg_push"></div></div></div><div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div></div>';

document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;  


$('textarea').keypress(
function(e){
    if (e.keyCode == 13) {
        var msg = $(this).val();
        if(msg!=''){
        $('<div class="msg_b">'+msg+'</div>').insertBefore('.msg_push');
        $('.msg_body').scrollTop($('.msg_body')[0].scrollHeight);
        }
        
    $(this).val('');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

It was just a bunch of preferences, since append is more practical. The essential question lies in the fact that:

  • The variables userName and Id should be declared.
  • The script with keypress() should come after the tags are created, so that they recognize them.
13.12.2015 / 23:53
What's wrong with the code below? How to trigger dropdown-menu by buttons independently