Multiple HTML files linked to only one Javascript file

Question

I want to have functions in an external Javascript file to be linked to each of my html files. However, I want some functions to be linked to one html file while other functions would be linked to a different html file. Do I need to have multiple Javascript files or can I condense them into only one file? When I tried to use one Javascript file every function would run on each of my pages. Is there a way to call a specific function in html without having the whole code? Like with css using #example for the id example in html.

I used this link in my index.html file:

<script type="text/javascript" src="example.js"></script>

While this one was in another html file:

<script type="text/javascript" src="example2.js"></script>

These links are the only Javascript included in my html files.

I'm not sure if additional examples of Javascript or html code is needed since this seems like a general question. Although, if more code is require then please tell me what specifically and I will gladly add it. I'm also new to coding so if you could ask before downvoting I would greatly appreciate it.

I think I found the problem. I have an RSS feed that comes through a free website but the function doesn't have anything next to it.

The html file links to the Javascript file with this in it and because the function is blank it automatically runs or that's what i'm assuming.

(function(){
var a=window;
var b="";
for(i=0;i<a.rssfeed_url.length;i++) {
    b=b+"rssfeed[url]["+i+"]="+encodeURIComponent(a.rssfeed_url[i])+"&"
}
var c="http://feed.surfing-waves.com/php/rssfeed.php"+"?"+b+"rssfeed[type]="+(a.rssfeed_type?a.rssfeed_type:"")+"&rssfeed[frame_width]="+a.rssfeed_frame_width+"&rssfeed[frame_height]="+a.rssfeed_frame_height+"&rssfeed[scroll]="+(a.rssfeed_scroll?a.rssfeed_scroll:"")+"&rssfeed[scroll_step]="+(a.rssfeed_scroll_step?a.rssfeed_scroll_step:"")+"&rssfeed[scroll_bar]="+(a.rssfeed_scroll_bar?a.rssfeed_scroll_bar:"")+"&rssfeed[target]="+(a.rssfeed_target?a.rssfeed_target:"")+"&rssfeed[font_size]="+(a.rssfeed_font_size?a.rssfeed_font_size:"")+"&rssfeed[font_face]="+(a.rssfeed_font_face?a.rssfeed_font_face:"")+"&rssfeed[border]="+(a.rssfeed_border?a.rssfeed_border:"")+"&rssfeed[css_url]="+(a.rssfeed_css_url?encodeURIComponent(a.rssfeed_css_url):"")+"&rssfeed[title]="+(a.rssfeed_title?a.rssfeed_title:"")+"&rssfeed[title_name]="+(a.rssfeed_title_name?a.rssfeed_title_name:"")+"&rssfeed[title_bgcolor]="+(a.rssfeed_title_bgcolor?encodeURIComponent(a.rssfeed_title_bgcolor):"")+"&rssfeed[title_color]="+(a.rssfeed_title_color?encodeURIComponent(a.rssfeed_title_color):"")+"&rssfeed[title_bgimage]="+(a.rssfeed_title_bgimage?encodeURIComponent(a.rssfeed_title_bgimage):"")+"&rssfeed[footer]="+(a.rssfeed_footer?a.rssfeed_footer:"")+"&rssfeed[footer_name]="+(a.rssfeed_footer_name?a.rssfeed_footer_name:"")+"&rssfeed[footer_bgcolor]="+(a.rssfeed_footer_bgcolor?encodeURIComponent(a.rssfeed_footer_bgcolor):"")+"&rssfeed[footer_color]="+(a.rssfeed_footer_color?encodeURIComponent(a.rssfeed_footer_color):"")+"&rssfeed[footer_bgimage]="+(a.rssfeed_footer_bgimage?encodeURIComponent(a.rssfeed_footer_bgimage):"")+"&rssfeed[item_bgcolor]="+(a.rssfeed_item_bgcolor?encodeURIComponent(a.rssfeed_item_bgcolor):"")+"&rssfeed[item_bgimage]="+(a.rssfeed_item_bgimage?encodeURIComponent(a.rssfeed_item_bgimage):"")+"&rssfeed[item_title_length]="+(a.rssfeed_item_title_length?a.rssfeed_item_title_length:"")+"&rssfeed[item_title_color]="+(a.rssfeed_item_title_color?encodeURIComponent(a.rssfeed_item_title_color):"")+"&rssfeed[item_border_bottom]="+(a.rssfeed_item_border_bottom?a.rssfeed_item_border_bottom:"")+"&rssfeed[item_source_icon]="+(a.rssfeed_item_source_icon?a.rssfeed_item_source_icon:"")+"&rssfeed[item_date]="+(a.rssfeed_item_date?a.rssfeed_item_date:"")+"&rssfeed[item_description]="+(a.rssfeed_item_description?a.rssfeed_item_description:"")+"&rssfeed[item_description_length]="+(a.rssfeed_item_description_length?a.rssfeed_item_description_length:"")+"&rssfeed[item_description_color]="+(a.rssfeed_item_description_color?encodeURIComponent(a.rssfeed_item_description_color):"")+"&rssfeed[item_description_link_color]="+(a.rssfeed_item_description_link_color?encodeURIComponent(a.rssfeed_item_description_link_color):"")+"&rssfeed[item_description_tag]="+(a.rssfeed_item_description_tag?a.rssfeed_item_description_tag:"")+"&rssfeed[no_items]="+(a.rssfeed_no_items?a.rssfeed_no_items:"")+"&rssfeed[cache]="+(a.rssfeed_cache?a.rssfeed_cache:"");
if(a.rssfeed_border!="off"&&!a.rssfeed_css_url){}
document.write('<iframe name="rssfeed_frame" width="'+a.rssfeed_frame_width+'" height="'+a.rssfeed_frame_height+'" frameborder="0" src="'+c+'" marginwidth="0" marginheight="0" vspace="0" hspace="0" scrolling="no" ALLOWTRANSPARENCY="true"></iframe>')
})()

The only problem now is that I don't know how to call the function. Another function I have is called because I have onClick="example()" which is fine for that but the RSS feed needs to load automatically. I don't want to have to click a button to get the feed to appear.

Answer 1

Functions only run if you call them. So you can have one JS file that contains functions that are never called by one HTML file, and nothing goes wrong -- they have no impact on the functioning of the page. The only downside of extra unused code is that is takes longer to load, but that isn't really significant until the file gets very big.

Answer 2

You could have a file named "common.js" that holds all related JavaScript functionality. But you will need separate JavaScript (either in a separate file or embedded in the HTML page itself) to make specific use of the common functionality according to the needs of the different pages.

After seeing some code, one may be able to provide a better answer.

Answer 3

It's more logical to split your javascript code into multiple files where it is appropriate. But you don't have to run any code in your javascript file even if it is linked to your html page if you put your code into functions.

function myFunction()
{
    // do something.
}

The code inside this function won't run unless you call it in your html.

<body onload="myFunction()">
  ...
</body>

Answer 4

I think you can do that for example by adding id or class to the html or body, and then, write conditions, if the element (html or body) contains the id/class execute the appropriate functions. When are the functions called? On page load? If you provide sample code, it would be better.

Answer 5

You can use location.pathname and check the path and use switch or if else