Passing a variable from html to an external js

Passing a variable from html to an external js

Hi, I've used jquery to create a tabbing system and I want to be able to use it on multiple pages. I want to be able to pass a variable containing the number of items in the list from the html to the js file.

Inside the js file I have this function:

function change(key, n){
      hideTabs();
      var tab = "#tab"+key;
      showTab(tab);
      for (c=1;c<=n;c++){
            var id = "div#opt"+c;      
            onClick(id, c, key, n);
                  
      }
      var opt = "#opt"+key;
      setActive(opt);
   }   


I want to be able to initialize it from the html setting key = 1 and n being the number of tabs I will have.

I haven't been able to do that so far. Any help would be appreciated.

Here's the whole js file if you guys want to have a look. This is my first time using jquery so if you see anything I could be doing better let me know.

// JavaScript Document
$(document).ready(function(){      
   change(1,3);
   
   function change(key, n){
      hideTabs();
      var tab = "#tab"+key;
      showTab(tab);
      for (c=1;c<=n;c++){
            var id = "div#opt"+c;      
            onClick(id, c, key, n);         
      }
      var opt = "#opt"+key;
      setActive(opt);
   }   
   
   function onClick(id , i ,key, n){
      
      if (i!=key){
      $(id).css({'color':'#434343'});   
      $(id).click(function(){
       change(i , n);
                     
                                    });
      }
   }
      
   function hideTabs(){
      $(".tab").hide();
      }
      
   function showTab(selected_tab){
      $(selected_tab).fadeIn();
      }
      
   function setActive(opt){
      $(opt).animate({color:'#b3b3b3'},300);
      $(opt).unbind("click");
      $(opt).unbind('mouseover').unbind('mouseout');
      }                  
});