Question

I’m trying to learn some jQuery, and I setup a test page with the following code:

<a id='encode' href='javascript: void(0)'>encode</a> |  
<a id='decode' href='javascript: void(0)'>decode</a> | 
<br/>
<textarea id='randomString' cols='100' rows='5'></textarea>

<script type='text/javascript'>
$(document.ready(function () {
  $('#encode').click(function() {
    $('#randomString').val(escape($('#randomString').val()));
  });
  $('#decode').click(function() {
    $('#randomString').val(unescape($('#randomString').val()));
  });     
});
</script>

The idea is I can put something in the textarea and click either “encode” or “decode”, and it will either escape or unescape what I put into the textarea.

This code works just fine, but my question has to do with how I am changing the value of the textarea. In my code, I am selecting the textarea value twice: once to (un)escape it, and once again to change the value. IMO this seems clunky and maybe unnecessary. I thought maybe I could do something like this instead:

$('#randomString').val(escape(this));

But this seems to refer to the object of the link I clicked, not the #randomString selector, so is there some other magic word I can use to reference that $('#randomString')?

Answer 1

The short answer, if I understand you correctly, is no. There isn’t a way to refer to $('#randomString') where you’re talking about. It’s just a parameter to the val method, so it’s just plain JavaScript syntax, no jQuery “magic”.

To accomplish the task at hand and make the code cleaner and less clunky, I would save off the jQuery object for #randomString so you don’t have to keep creating it:

$(document.ready(function () {
    var $rndStr = $('#randomString');

    $('#encode').click(function() {
        $rndStr.val(escape($rndStr.val()));
    });

    $('#decode').click(function() {
        $('#rndStr').val(unescape($rndStr.val()));
    });     
});