jquery from external file.

Question

I am a newbie to Jquery as will be evident. I have 2 scripts in an external file named scrip.js and it is included with a simple

<script src="/media/javascripts/scrips.js"></script>

the two scripts in scrips.js are

function textCounter(field,cntfield,maxlimit) {
 if (field.value.length > maxlimit) // if too long...trim it!
 field.value = field.value.substring(0, maxlimit);
 // otherwise, update 'characters left' counter
 else
 cntfield.value = maxlimit - field.value.length;
 }

$(function() {
$("button").click(function(){
$("p").css("color","black");
  });
});

The first script works fine. the second does not. The html for the second scrip looks like this, very simple:

<span><? echo $row->date, nbs(10), $row->author, nbs(20), anchor("http://twitter.com   /home?status=$twittermsg", 'ReTweet', $tweet), nbs(15), "<button>Black Font</button>"; ?></span> 

The button Black font should be selected by the second script in the external file but it doesnt work. Is there something else to be done to a jquery scrip in an external file to make it work? Is there anything I should be doing in the html to get it to work? (the html is Codeigniter btw)

I have read several questions on here about this but they appear very confusing

Thank you

Answer 1

Did you make sure to include the jquery.js file before you included your script like below:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="/media/javascripts/scrips.js"></script>

Answer 2

Looks to me like you're missing an ending brace for the function...

The last brace that I see ends the if statement. I believe you need another one to end the function as well:

function textCounter(field,cntfield,maxlimit) {
   if (field.value.length > maxlimit) // if too long...trim it!
       field.value = field.value.substring(0, maxlimit);
       // otherwise, update 'characters left' counter
   else
       cntfield.value = maxlimit - field.value.length;
   }
}

Answer 3

in your given link, I don't see this somewhere

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

and you have two link scripts for jQuery, one at the header and one at the bottom part. Just one will do, remove the bottom one.

Answer 4

See the error console for js error. I did not find any problem in your script. You can use an alert in button click function to debug your script. you can use button and p id/class in order to avoid conflict.