Question

Okay. So I have this code

<input id="suspect" value="" type="text">
<input id="reason" value="" type="text">
<textarea></textarea>
var suspect = $('input#suspect').text();
var reason = $('input#reason').text();
$('textarea').val('' + suspect + ' and ' + reason + '')

Then I put something in both of those 2 inputs and then the textarea recieves no value from the inputs. How to fix that problem ?

Answer 1

Because when you set the variables there’s no text inside the elements from which you’re trying to recover the entered-text (incidentally, for inputs you’re looking for .val()). If you bind to the focus event:

$('textarea').focus(
    function(){
        var suspect = $('#suspect').val(),
            reason = $('#reason').val();
        $(this).val('' + suspect + ' and ' + reason + '');
    });

JS Fiddle demo.

Also, in this case (since you’ve placed the JavaScript after the elements in the DOM, albeit you’ve omitted the <script></script> tags) you might be okay not using the $(document).ready() event handler, but I’d normally suggest wrapping jQuery in such, just to be sure that events are being bound after the elements to which they’re being bound exist in the DOM.

References:

• focus().
• val().