How to input user data through a text field, then display immediately below the text field?

Question

I am new to Javascript, but basically I want to take the users text, and once they hit the button, be able to output it below the button. This is what I have so far:

 <html lang="en"> <head> <meta charset="utf-8" /> <title>title</title> <link rel="stylesheet" href="main.css"> <script> var message = "#"; $("#message").text(message); </script> </head> <body> <div id="wrapper"> <var id="message"></var><textarea rows="4" cols="50" placeholder="Enter their post here, exactly word for word." id="post"></textarea></var> <button type="button">Submit</button> </div> </div> </body> </html>

Answer 1

This is without jQuery.

Add an id to your button and create the empty text area with id 'textDiv' and try this.

<script type="text/javascript">

         var button = document.getElementById('button_ID');
         button.addEventListener('click',showText);

         function showText() {
             document.getElementById('textDiv').innerHTML = 'new text'; 
         }    
</script>

Answer 2

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

   var text = document.getElementById("post").value;

   $("#message").html(text);
});



    <div id="wrapper">
    <textarea rows="4" cols="50" placeholder="Enter their post here, exactly word for word." id="post"></textarea>
    <button id="button" type="button">Submit</button>

    </div>

    <span id="message"></span>

Result: http://jsfiddle.net/YoshiMaster/1r177khr/4/

How to input user data through a text field, then display immediately below the text field?

Question

2 answers

solution1
0 2014-09-30 00:32:48

solution2
0 2014-09-30 00:34:32

How to input user data through a text field, then display immediately below the text field?

Question

2 answers

solution1 0 2014-09-30 00:32:48

solution2 0 2014-09-30 00:34:32

solution1
0 2014-09-30 00:32:48

solution2
0 2014-09-30 00:34:32