How to add the Javascript block correctly in .js file

Question

I am adding this to .js file, I should remove Script tag from starting and end? Is there anything else that I should add or remove, so that this works correctly?

 <script type="text/javascript">

 $(document).ready(function() {
 	 var wid = window.innerWidth;
	 var hit = window.innerHeight;
	 
	 //alert( w );
  var geturl = window.location.href;
  var spliturl = geturl.split("layout=");
  
	if( geturl.indexOf("default") > -1 || spliturl[1] == 'default' ){
	   	var atr = "";
		var septer = "";
		
		$("a").each(function(index, element) {
			if( $(this).attr("id") != "desktop-view" && $(this).attr("id") != "mobile-view" ) {
				atr = $(this).attr("href");
				
				if( atr != undefined) {
					if( atr.toString().indexOf("?") > -1) {
						septer = "&";
					} else {
						septer = "?";	
					}
					
					
					if(	atr.indexOf("#") <= -1 && atr.indexOf("add_to_cart") <= -1) {
						$(this).attr("href", atr + septer + "layout=default");
					}
				}
			}
		});
		
		
		var murl = geturl;
		murl = murl.replace("&layout=default","");
		murl = murl.replace("layout=default","");
		$("#mobile-view").attr("href", murl);
		

		if(/iPhone|iPad|iPod|Windows Phone/i.test(navigator.userAgent) ) {
			//alert( window.innerHeight + " |  " + window.innerWidth );
			if( wid == 375 ||  wid == 667 || (wid == 320 && hit >=400) || wid == 568 || wid == 414 || wid == 736 ) { //|| wid == 414 || wid == 736 added
				$("meta[name='viewport']").attr('content','initial-scale=0, minimum-scale=0, maximum-scale=1.0, user-scalable=yes');
				//alert("target device");
			} else {
				$("meta[name='viewport']").attr('content','width=100%, initial-scale=0');
			}
			/*} else {
				$("meta[name='viewport']").attr('content','width=device-width, initial-scale=0');	
			}*/
			
		} else {
			$("meta[name='viewport']").attr('content','width=device-width, initial-scale=0');	
		}
		
   
		
   
   if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    $("#mobile-view").attr("style", "display:block !important");
    $("#desktop-view").attr("style", "display:none !important");
   }
    
  }else{
   if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    $("#mobile-view").attr("style", "display:none !important");
    $("#desktop-view").attr("style", "display:block !important");
   }   
    
   var tt='<link href="/assets/css/responsive.css" rel="stylesheet" type="text/css" id="res-css" />';
   $("head").append(tt);
   $("meta[name='viewport']").attr('content','width=device-width, initial-scale=1.0');
   
   
   		$("a").each(function(index, element) {
			if( $(this).attr("id") == "desktop-view" ) {
				var vurl = geturl;
	
				if(	vurl.indexOf("?") > -1 ) {
					vurl = vurl.replace("?","");
				}
				
				vurl = vurl.split('?');
				//parts = vurl[0].split("/");
				vurl = vurl[0] + "?layout=default";
				
				$(this).attr("href", vurl);
					
			}
		});
   
    
  }
  
    });
 
</script>

This code is included from .html file to another .html, I want to add this in .js file rather than including it from .html file. If anything is unclear, ask question first.

You don't need the <script> tags in a .js file. Only in HTML. — Dal Hundal
– Dal Hundal, Commented Aug 14, 2015 at 10:44
For more organisational code you can create new js file and include it in your main js file, Take a look at Include a JavaScript file in another JavaScript file? — Zakaria Acharki
– Zakaria Acharki, Commented Aug 14, 2015 at 10:59

Luke Twomey · Accepted Answer · 2015-08-14 10:48:25Z

1

You would need to remove the

<script type="text/javascript">

and

</script>

tags, if you want this code in a javascript file. Those script tags are HTML tags which are unnecessary if you have a dedicated javascript file. Of course you then need to ensure you link to the file itself in your HTML, with a line like this:

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

answered Aug 14, 2015 at 10:48

Luke Twomey

1,2851 gold badge9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rafah Mehfooz Over a year ago

I have added as you said but there seems to be a problem, if you inspect element this home page americaint.com ,I have control of this site. Under the Sources tab assets>js>common.js line 167, it says "Uncaught ReferenceError: $ is not defined" ? Shall I remove the "$" then it will work?

Luke Twomey Over a year ago

When you view page source, your common.js javascript file is loading before jQuery. So it doesn't know what $ is. You need to load jQuery first, before common.js.

Collectives™ on Stack Overflow

How to add the Javascript block correctly in .js file

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related