Develop Reference

can plain javascript and jQuery be minified in one file

I have a js file that is written in jQuery (3.1.0) and just one line plain javascript.
for example:
$(window).on('load',function(){
var email = $('#email');
function setMessage(str){
document.getElementById('email').setCustomValidity(str);
};
email.bind('keyup',function(){
if(email.val()==''){
setMessage('Box is Empty');
}
});
});
It worked fine when it was like this.
Next step is minify the js file, that's when problem starts where console keeps on screaming Uncaught TypeError: Cannot read property 'setCustomValidity' of null - jquery-3.1.0.min.js.
Sources I used:
setCustomValidity
Make sure semi-colon - Checked

Rather than using window.onload using document.ready
Refer this for difference between onload and document.ready as the error which you are facing is due to the element not loaded and you are trying to access element before document is fully loaded
https://stackoverflow.com/a/3698214/1569443
Use below code
$('document').ready(function(){
var email = $('#email');
function setMessage(str){
document.getElementById('email').setCustomValidity(str);
};
email.bind('keyup',function(){
if(email.val()==''){
setMessage('Box is Empty');
}
});
});

Undefined jscript in javascript

I have created an ASP.Net application. I am using a javascript which is written in a separate file. I am using Var myvariableName ={} in javascript file.
I have included this file in MasterPage and accessing myvariableName in my aspx page.
This is working fine in Google Chrome, however, in IE 8 an unhandled exception is thrown as
myvariableName is undefined.
the error shows as;
0x800a1391 - Microsoft JScript runtime error: 'Common' is undefined
where Common is my javascript variable.
Please assist me in resolving this issue.

You're probably accessing the variable before your external script is executed.
Be sure to access your variable as soon as the document is fully loaded (i.e. $(document).ready(function(){...}); if you use jQuery) or try to find out the real execution order with some alert (that shouldn't be browser-depentent, by the way!).

If your code is already in a document.load or $(document).ready(function) you can always
handle the variable before acessing it via
if (typeof myvariableName !== "undefined") {
// do stuff
}
Some times in IE shit happens and window.load gets screwed specially when async calls are in place.

You are probably getting this error due to a missing semicolon. Change the code to this:
var myvariableName = {};

In your asp page, where you access your custom variable, wrap your code with:
var myvariableName = {};
window.onload = function(){
// your code here where you're accessing the variable
};

Uncaught TypeError: Cannot read property 'value' of null, need some direction

I have been trying to figure out this particular problem in my developer tools, but I've had no luck thus far. I have an error on one of my js files that says
Uncaught TypeError: Cannot read property 'value' of null
The following error refers to the 1st variable of dt_version below. The particular thing is if I comment out the first line of code. I get the same error on the following variables of offload1 and offload2. The variable is a number that I am trying to get passed over. I run this function on my body when the page loads...onload=updatetotal();
function updatetotal() {
var dt_version = document.getElementById("dt_version").value-0;
var offload1 = document.getElementById("capacity_offload1").value-0;
var offload2 = document.getElementById("capacity_offload2").value-0;
var offload3 = document.getElementById("capacity_offload3").value-0;
}
If a run an if statement looking for document.getElementByID("dt_version");...it defaults to false..so its not being carried over though on the previous page, I can see its input fine with the value in it. What am I missing here guys?

This error means that the id dt_version does not exist. Check your html to make sure it is there:
var dt = document.getElementById("dt_version");
if (dt){
// do your stuff
}else {
console.log("dt does not exist")
}

Another cause for this error may be- as you are calling the javascript function on page load there is a possible chance that your control is not yet completely rendered to the page. A simple solution is just move that control to the beginning of the page. If it doesn't work then an reliable solution is, call the function inside jquery $(document).ready().

Error on using alert in Javascript (Property 'alert' of object is not a function)

I am just trying to use alert and put a string variable inside the alert and get an error:
Uncaught TypeError: Property 'alert' of object [Object Window] is not a function
My code is:
var shortenurl = msg.d;
alert(shortenurl);
I've checked the value and it has a string inside, not an object.

Somewhere in your code you overrode alert. Check for var alert = ... or some other kind of declaration like that. Also check for window.alert declarations.

I had that error message due to an alert() blocked by my pop-up-blocker.

I'm adding this one as an addition to this. In my case, when I had a similar problem, it turned out to not be my own code that was causing the problem but a poorly written extension that had been added to a client's browser. Once it was disabled, the script error went away.
If you haven't overridden the method name in your own code anywhere, you may want to try disabling extensions to see if any of those is inadvertently interfering with your script.

Check if you've got a Bootstrap .js declaration if required (after jQuery) i.e.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Mozilla says,
The alert function is not actually a part of JavaScript itself.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
You can not see a function called alert here : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects

Adding to Chris's answer... I had mistakenly overrode alert in my own function!
//Don't do this:
function alertOrConsole(node, alert){
if(alert){
alert(node);
}else{
console.log(node);
}
}
//----------------------------
//Fixed:
function alertOrConsole(node, flag){
if(flag){
alert(node);
}else{
console.log(node);
}
}

One of the possible reasons could be that alert is used as variable - for example inside of function:
function MyFunction(v1,alert)
{
alert(v1); //will fail exactly with that message
}
Solution is not to use predefined words as variables.

Undefined variable error that shouldn't be a variable

I've made a piece of code in jquery that assigns a href attribute to a variable. Here's that code:
$('#reactions' + i).attr('href', 'javascript:comments ('+entry.url+','+i+');');
This should assign a call to the javascript function comments. Now I want to use that call on a jquery mobile button, like this:
document.write('Reactions');
But doing this gives me a in FF and Chrome. This is the error from FF±
Uncaught exception: ReferenceError: Undefined variable: i_heart_chaos_ihc_after_dark_independence_day_through_a_bullhornthis_is_what
Error thrown at line 1, column 0 in javascript:comments (i_heart_chaos_ihc_after_dark_independence_day_through_a_bullhornthis_is_what,1);:
comments (i_heart_chaos_ihc_after_dark_independence_day_through_a_bullhornthis_is_what,1);
In this, i_heart_chaos_ihc_after_dark_independence_day_through_a_bullhornthis_is_what is the value of entry.url.
I'm just not getting why this error appears, as far as I know, everything should work.
I know that there are questions looking similar to mine, but I couldn't figure out the answer. If you want to see the whole source, it's here.

Surround entry.url with quotes:
$('#reactions' + i).attr('href', 'javascript:comments ("'+entry.url+'",'+i+');');

The best way to fix the issue is to do it the "jQuery way". Instead of adding a href attribute that executes JavaScript, add a click event:
$('#reactions' + i).click( function() {
comments( entry.url, i );
});
Similarly don't use document.write() but add elements to the document using jQuery functions.