how to use javascript in a jquery based jsfiddle?

Question

i am working on a jsfiddle and have selected that the framework used is 'onload, jquery 1.8.2'.

i have also called in the following resources:

• jquery.multipage.js
• jquery.validate.min.js

both these scripts, as well as the html and css defined in jsfiddle, are outputting the expected results.

i am also however trying to add some pure javascript to achieve some onfocus and onblur effects.

my question is:

with the above environment, how do i add the following javascript to the jsfiddle:

<script type="text/javascript">
function clearText(field){
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
}
</script>

the jsfiddle in its current state is here:

http://jsfiddle.net/eJKQn/139/

thank you.

Answer 1

window.clearText = function(field){
   if (field.defaultValue == field.value) field.value = '';
   else if (field.value == '') field.value = field.defaultValue;
};

The window object is your true global namespace, which you can reference to define variables and functions w/in other enclosures. Use the above, notice the only thing that changed is the first line and the semi-colon at the end.

Answer 2

I don't think it matters where or how you add the pure Javascript. If you do need to do this (mostly in your own app), separate jQuery and Javascript like

// pure Javascript
function clearText(field){   
    if (field.defaultValue == field.value) field.value = '';   
    else if (field.value == '') field.value = field.defaultValue;   
}

// jQuery
$(function() {
    // all your jQuery scripts
});

Answer 3

Use 'no wrap (head)' for this script then manually write onload or ready functions for jquery

Answer 4

Inside Script tag you can freely use both jQuery and Javascript together

There are two major rules as far as i know

1. Anything inside document.ready will become private. So , the scope will be limited
2. the jQuery object is a wrapper of javascript normal object. So , little care has to be taken when mixing javascript and jQuery