We Keep Coding

Is there a way to make my a JavaScript file not to run in a html page?

I have two html files(index.html and project.html), index.html contain or needs two javascript files(main.js and index.js).
The main.js contains the functions that both html files needs. And the index.js has the functons that only index.html needs.
So am saying index.html-->(main.js,index.js) and project.html-->(main.js).
The issue is that when I open the project.html the DOM elements that I called in index.js is throwing errors saying that the element is null.
The thing is that the DOM element that is causing the error is only created in index.html and not project.html but project is not supposed to call or know that function.
index.html
<script src="asset/javaScript/javaScript_for_index/main.js" defer type="module"></script>
<script src="asset/javaScript/javaScript_for_index/index.js" defer type="module"></script>
project.html
<script src="asset/javaScript/javaScript_for_index/main.js" defer type="module"></script>
This is where i get the error in the inspector. Note that the error comes from the project.html and it is caused by the index.js
I know that this is a bit confusing but this is the best i can explain it.
Thanks in advance!

Two things:
Note that all your <script> elements should appear in your markup before the closing </body> element.
On each page, only reference the <script>(s) that you need for that page
Example:
index.html
<script src="main.js"></script>
<script src="index.js"></script>
</body>
</html>
project.html
<script src="main.js"></script>
</body>
</html>

Example:
index.html needs main.js and index.js
project.html needs A CERTAIN function in main.js ONLY
so main.js
function functionsThatIndexNeeds() {
alert('Im in index.html!!!');
}
function functionsThatProjectNeeds() {
alert('IM IN PROJECTS~~~');
}
index.html
<script>functionsThatIndexNeeds()</script>
projects.html
<script>functionsThatProjectNeeds</script>
The point is to call ONLY the functions that each HTML files need.
Tell me if this works on you!:)

Before we do anything start with clearing your cache. (Important)
If you are sure that you have done everything right, just like #Rounin answer suggest,
Then run your code again, inspect to make sure your error is coming from index.js and if it is, then you are somehow injecting index.js into the page without knowing , (maybe somewhere at the middle of your body or something else), you might have to do a more thorough debugging than just asking. And most probably you have not told us everything because you might not be aware of it.
Try searching for any occurrence of index.js on your project.html script. (Ctrl+F)
Now if all else fails and you have to move on fast, then u can try this hack on your index.html and index.js script.
Index.html
<script> var page = "index" </script>
Put this on line 1, before anything else, because I don't know what line might be caising your problem
Then on index.js wrap your codes with an if statement (i.e put if statements to check if the page = "index" to prevent unwanted codes from running on other pages
E.g:
If (typeof page !== undefined && page == "index") {
// allow code to execute
}
This is a dirty hack, but it might kept you going until you get a more experience engineer to debug your codes...

Obviously, you must have something in main.js that is referencing DOM parts that are in index.html. Stop referencing those, and you'll be okay. Note, that if I have a DIV in index.html with ID foo which project.html does not have, then you can use document.querySelectorAll() function to check if that element exists (can look at length, returned from that, as well as other options like undefined), and then react if it doesn't exist. That can help you delineate items from index.html versus project.html.

jQuery code always returns "not defined" in Sublime

I have my jQuery linked in the html file before the js file, and I've ensured that it is loading properly in the browser window. The jQuery code actually WORKS, so I have no idea why sublime thinks it cant understand the sytax. I've tried just about every suggestion in this post (JQuery - $ is not defined) which there was a ton. Also, i dont currently have sublimeLinter installed, currently using a console that i set up with this (http://www.wikihow.com/Create-a-Javascript-Console-in-Sublime-Text).
This code:
<html>
<head>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body> </body>
</html>
with this js:
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j("body").text("Hello world!");
});
leads to this error message:

Add an ignore comment to the top of your document. What is happening is that your linter is not seeing jQuery as it is not part of the current document. This will force your linter to ignore the jQuery keyword while linting.
/*globals $:false, jQuery:false*/

Why no $.connection object defined?

This is my HTML beginning:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/Scripts/jquery-1.8.2.min.js"></script>
<script src="/Scripts/jquery.signalR-0.5.3.js" type="text/javascript"></script>
<script src="/Scripts/MyScript.js" type="text/javascript"></script>
<title>Some title</title>
</head>
I tried adding just before </head>:
<script type="text/javascript" src="/signalr/hubs"></script>
But it doesn't help.
I also tried to remove everything besides jQuery and signalR scripts.
Please note: All scripts, including jquery.signalR-0.5.3.js (and hubs, if I add it) are loaded successfully (I can single step it with Chrome "Developer Tools").
So why I don't have $.connection object defined ?
Edit:
I cleaned all unnecessary code, and found out meanwhile that:
$.connection does exist when I'm in MyScript.js, but I tried to test it first using the chrome console. In the console it does not exist... I don't understand why.
I save $.connection for the moment, in order to test it, in someGlobalObj:
someGlobalObj = $.connection;
and that works...
So my updated question would be: how-come $.connection is visible during my script, but invisible in the chrome console ($, or jQuery are globals) ?

how-come $.connection is visible during my script, but invisible in the chrome console ($, or jQuery are globals)?
There are only two explanations: Something that executes after your script (a timeout, some other script)…
…deletes the connection property of the jQuery object
…overwrites the global $ (and even jQuery?) variables with similiar object(s) which don't have the connection property.
The second one could be the case if you also use other libraries (like Prototype).

Uncaught ReferenceError $ is not defined

I'm very new to JavaScript (just started a few hours ago and trying to get a script working). I went through a few tutorials on W3 and the 'hello world' code works when I paste it directly into my HTML but I'm having a problem with a script (I've had problems with other scripts as well but I am not sure what I'm doing wrong).
I have this code that I want to test in my HTML, I copied the HTML in and it looks the same then I made a file in my static folder called edit.js and copied the JavaScript into it (exactly as shown). It didn't work no errors on the page but when I click it nothing happens. I tried to paste a W3 'hello world' code in and that worked but this script does not.
I tried to inspect the code in Chrome and that's where I see the above error (under the resources tab). I can open the js file using Chrome which makes me think the js file is accessible and pointing correctly but I'm not sure how to get it working. I'm using Jinja2 as my template engine to render the HTML and in my header I have:
<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
and in my main template (the one that gets rendered on all pages) I have:
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
edit.js:
(even putting it within the script tag directly on the page I want to use it on doesn't work)
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#changevalue').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});​
HTML:
(it's embedded in a larger page)
<head>
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
</head>
... my html code..
<div id="wrapper">
<div id="container">
<div id="storedvalue"><span>Hello</span> [edit]</div>
<div id="altervalue" style="display:none;"><input type="text" name="changevalue" id="changevalue" value="Hello"> [save]</div>
</div>
</div>
I have never been able to successfully run a JavaScript that wasn't on W3 yet. I get the same problem with other scripts even though I see people online saying they work fine for them. Do I need to do anything extra to make this work?
My two questions are:
What am I doing wrong?
Because Javascript seems to just not work when there's a problem, is there a way to get errors or information on what's actually wrong?
I read Uncaught ReferenceError: $ is not defined? and have been trying to figure this out for the last hour and can't see my problem.

First you need to place the jQuery script tag first.
Second, you need to do one of the following things:
Put your code within this function:
$(document).ready(function(){/*CODE HERE*/});
Or like this:
$(function(){
/*CODE HERE*/
});
The DOM needs to be ready before you can use it. Placing your code within anonymous functions that are executed on the ready event of the DOM is how you can do this.
Edit:
$(function(){
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#changevalue').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});​
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
Script tag for jQuery should come before your custom javascript.
Follow by edit.js
<script type="text/javascript" src="static/edit.js"></script>

Try removing the language attribute..sometimes work for me. It's obsolete now .. i think

You need to include jquery before you can use it.

Cannot get Adobe AIR's ApplicationUpdaterUI() to work

Here is my problem - I'm trying to write a self-updating application, but I keep getting an error saying that runtime.air.update.ApplicationUpdaterUI() does not return a constructor.
Here's the relevant section of the code; there are other javascript files being included, but I don't think that any of them would be actively breaking AIR itself.
<html>
<head>
<script type="text/javascript" src="./js/AIRAliases.js"></script>
<script type="text/javascript" src="./js/jquery-1.3.1.js"></script>
<script src="ApplicationUpdater_UI.swf" type="application/x-shockwave-flash"></script>
<script>
$(document).ready( function() {
var appUpdater = new runtime.air.update.ApplicationUpdaterUI(); // line 64 in this example
}
</script>
</head>
<body> ... stuff ... </body>
</html>
And the error that I get when I test it is
TypeError: Value is not a constructor. Cannot be used with new.
at app:/index3.html : 64
at app:/js/jquery-1.3.1.js : 2912
at app:/js/jquery-1.3.1.js : 686
at app:/js/jquery-1.3.1.js : 2916
at app:/js/jquery-1.3.1.js : 2936

Verify the path in that script tag for the SWF, I'm guessing you do not have the reference to the ApplicationUpdater_UI.swf correct.
Air is basically complaining that it cannot find a runtime.air.update.ApplicationUpdaterUI() method to call anywhere, which likely means it can't find the SWF (or I suppose it's possible the SWF is corrupted).

Not sure if this is related, but neither $(document).ready nor .load will work if you load the .swf before the script. Make sure you put the .swf reference at the very bottom of your page.