We Keep Coding

How to use an external function in event handler in JQuery

I want to do something like this:
$(div).bind('click', myFunctionWithManyManyLinesOfCode(param) );
.....
function myFunctionWithManyManyLinesOfCode(args){
//50 lines of Code
}
If I do this the function is executed when the code reaches the point and doesn't execute on clicks.
If I include the code from the function myFunctionWithManyManyLinesOfCode in the bind method it will be a mess of code.
Also, I've tried this, but I cannot reference variables, they are undefined
$(div).bind('click', function() {myFunctionWithManyManyLinesOfCode(param)} );

You can pass whatever data you want to in the following way.
This should do the trick for you. If something is unclear please write a comment.
Edit: As stated in the comments you should use on and not bind.
function myFunction(e){
console.log(e.data.id);
}
$('#example').on('click',{id: "WHATEVER"}, myFunction);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="example">Test</button>

First of all, 50 lines of code are too much for one function and should be divided into smaller methods, but you can use this method:
var hello = () => {
alert(123)
}
$("p").click(hello);

How to call javascript function inside jQuery

We have this tag with a javascript function in our HTML,
<select name="My_Saved_Billing" onchange="Choose_My_Saved_Billing(this.selectedIndex)" >
<option>Select</option>
<option value="1714">Address line 1, QC</option>
</select>
<script type="text/javascript">
function Choose_My_Saved_Billing(arg_index) {
switch(arg_index) {
// some commands here
}
}
</script>
And I also added a jQuery to it which is below so that on windows load, it will automatically select the second option.
<script type="text/javascript">
$(window).load(function(){
$("select").val($("select option:eq(1)").val());
});
</script>
But is it possible to call javascript function using jQuery? If so, how should I call this one?
Should I use Choose_My_Saved_Billing(this.selectedIndex)or Choose_My_Saved_Billing(arg_index)or you might know something. I've tried these two but none are working. Please let me know. Just a beginner here.

The way to call a JavaScript function from a JQuery file is the same as calling a JavaScript function from a JavaScript file :) This is so because JQuery is a library based from JavaScript. Say, you want to call function foo from a JavaScript file, when the window loads.
JQuery:
$(window).on('load', function() {
foo();
});
And JavaScript:
function foo() {
alert('This works!');
}
I hope this helps!

Yes, it's possible to call functions inside a jQuery ready block. Since you've defined the function at global scope (should probably move this into the jQuery ready block or, if you want to go to the trouble, into a module), it can be called from anywhere. So inside your ready block:
$(function () {
// do stuff
Choose_My_Saved_Billing(args);
});

jQuery is JavaScript. It's just a library for JavaScript. The main jQuery global $ is a JavaScript function that takes a valid selector as an argument and provides several methods on the return value of that function.
So calling a JavaScript function inside the callback function to .load is not an issue.
It is not clear what the Choose_My_Saved_Billing function actually does.

Think about what's happening here. In your onchange event you're calling the function with the index of the selected option passed as an argument. Since JQuery is just a library of shortcuts for things you can do in JavaScript, we should easily be able to do the same thing.
So let's get the element for which we want the selected index:
// maybe think about adding an ID here for better selection
var select = $('select[name^="My_Saved_"]');
Then let's get the index with a change event, then call the function:
var index = 0;
select.change(function(){
index = select.selectedIndex || 2; // set the index to default to 2
Choose_My_Saved_billing(index);
});

Instead of using onchange="...", just use jQuery to attach a change listener:
$(window).load(function() {
$('.colors_backgroundneutral select').on('change', function () {
Choose_My_Saved_Billing(this.value);
});
});

$(document).ready(function() {
$("#Submit1").click(function() {
$("#id1").hide();
Raise1();
});
$("#Raise").click(function() {
$("#id1").show();
});
});
function Raise1() {
var value1;
alert("hi");
value1 = document.getElementById("amount").value;
alert(value1);
alert("done");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

As jQuery is a more simple and advanced JavaScript solution, my guessing is you can call you JS function like this:
$(window).load(function(){
my_js_function(arg1, arg2);
});
Now, what you want is to call the JS function named Choose_My_Saved_Billing() with argument arg_index
So, your jQuery will look like this:
$(window).load(function(){
Choose_My_Saved_Billing(arg_index);
});
This only works if the function is already declared through raw code, on via the <script type="text/javascript" src="path/to/my_file.js"> head tag.
It should work like a charm, if not, feel free to share the errors returned by your browser.

How to define a jQuery function properly

I want to write an jquery function because otherwise I have to write some code over and over.
Here is wat the function was first:
$(".checkbox-car").click(function(){
$(this).toggleClass('checked-car')
});
$(".checkbox-bus").click(function(){
$(this).toggleClass('checked-bus')
});
And this is what I tried to do with my own function:
$.fn.checkedFunction = function(Clicked, Checked){
$(this).click(function(){
console.log('check');
$(Clicked).toggleClass(Checked);
});
}
$('.checkbox-car').checkedFunction('.checkbox-car','.checked-car');
But I get the error that the checkedFunction is not defined.
What am I doing wrong here can someone help me out?

You're getting an error that checkedFunction isn't defined because it isn't. checkedFunction is a property defined in$.fn object.
To use the function you created, you should do
$(".some-element").checkedFunction(...args).
More over, you should read the jQuery docs.

Just had to do this:
$.fn.checkedFunction = function(Clicked, Checked){
$(this).click(function(){
$(Clicked).toggleClass(Checked);
});
}
$('.checkbox-car').checkedFunction('.checkbox-car','checked-car');
$('.checkbox-bus').checkedFunction('.checkbox-bus','checked-bus');
remove the dot before the second checked- class

this.welcome() is not a function

I am trying to create a small javascript plugin like this:
function TextShadow(host){
this.host_id=host;
this.welcome=function(){alert('welcome to earth')};
$(function(){
this.welcome();
$(this.host_id).html("<p>hello world</p>");
});
}
I then call it from an other script like this:
var test=new TextShadow("#sample");
but i get this.welcome is not a function.However if i change the previous code to the following one everything works fine:
function TextShadow(host){
this.host_id=host;
this.welcome=function(){alert('welcome to earth')};
var gen=this;
$(function(){
gen.welcome();
$(gen.host_id).html("<p>hello world</p>");
});
}
Can someone explain me why the first piece of code doesn't work while the second does?

Because the scope changes within JavaScript functions. You can bind the function to set this to the desired value.
function TextShadow(host){
this.host_id=host;
this.welcome=function(){alert('welcome to earth')};
$(function(){
this.welcome();
$(this.host_id).html("<p>hello world</p>");
}.bind(this));
}
It is even cleaner in ES6 where you can use arrow functions:
$(() => {
this.welcome();
$(this.host_id).html("<p>hello world</p>");
});
MDN Scope

Because your this changes once you go into the anonymous function. By assigning this to something else: gen, you can still use it in a different function.

You can use bind to set this
function TextShadow(host){
this.host_id=host;
this.welcome=function(){alert('welcome to earth')};
$(function(){
this.welcome();
$(this.host_id).html("<p>hello world</p>");
}.bind(this));
}
OR
Use selfor any variable to store this and use self in place of this
function TextShadow(host){
var self=this;
self.host_id=host;
self.welcome=function(){alert('welcome to earth')};
$(function(){
self.welcome();
$(self.host_id).html("<p>hello world</p>");
});
}

In your first Function Welcome Function Can't be seeing because this Binding of the current execution context .anonymous Function is the current execution context and you try tho access function form anther context

Access function in another js file with $(document).ready(function()

According to this post Click here to see the referred post
I tried to get access to a function which is defined in another .js file following the post instruction. However, I still have a problem. See my code below:
sildemenu.js
$(document).ready(function() {
var window.slideMenu=function(){
//do something here
}();
});
control.js
$(document).ready(function() {
$('#foo').on('click', function() {
window.slideMenu();
});
});
I got the error "Object [object Window] has no method 'sildeMenu' ".
I am very new in programming. Please give me a mercy.

You try to define a complex variable, (which is impossible this way) instead of assign a value to the global object- window.
var window.slideMenu=function(){
//^^^ Get rid of this
//do something here
}();
//^^ and remove this
And get rid of the var
Fixed code:
window.slideMenu=function(){
//do something here
};

There is no need of window object just write:
sildemenu.js
$(document).ready(function() {
slideMenu=function(){
//Do your stuff here!
};
});
control.js
$(document).ready(function() {
$('#foo').on('click', function() {
slideMenu();
});
});