Am trying to call a JS script from a function library in another script.
Eg. iceCreams.Js contains --->
iceCream(iceCreams){
var profit = .54
var Total = iceCreams * profits
return Total;
}
register.js contains -->
dailyTotals(wages, iceCreams){
var total = iceCream(iceCreams);
var profit = iceCreaps - wages
return wages;
}
Any help pointing me in the right direction?!
Make sure your page loads the iceCream.Js before the register.js:
<html>
...
<script type="text/javascript" src="iceCream.Js"></script>
<!-- now you can use functions in iceCream.Js in your register.js -->
<script type="text/javascript" src="register.js"></script>
....
</html>
Running the javascripts is done in client side and after rendering the full html. So, you have to add script tag for the library javascripts before consuming ones.
Just add script tag for the library before the one for register:
<script type="text/javascript" src="iceCreams.Js"></script>
<script type="text/javascript" src="register.js"></script>
Both script files must be referenced on the page they are used.
Additionally, to get IntelliSense in Visual Studio to work within the script, add the following line to the top of register.js:
/// <reference path="iceCreams.js" />
Related
Can anyone please guide me regarding how can I add custom javascript in Laravel project?
I did google and found some steps but unable to figure out what the error is going on?
Steps I
Created a custom.js in my public folder with a simple function
add script tag in my app.blade.php
extends my layout
But the function is not working
$(document).ready(function()
{
alert("hello this is test");
})
custom.js
enter code here
<script type="text/javascrip" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>"
<script type="text/javascript" src="{{asset('js/custom.js')}}"></script>
code I added in my main file app.blade
but when load my page it doesn't give me an alert. Alert is just for testing I tried with various function.
You misspelled javascript
Remove the (") after writing the </script>
For Javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="{{ URL::asset('js/custom.js') }}"></script>
Make your directory structure is like this for JS: /public/js/custom.js
I have to review your code. I have found an error in your code like a spelling mistake.
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>"
You have miss t at the end of javascript.
Iam using load() for loading external html file.
$("#header_section").load("header.html");
$("#sidemenu_section").load("side_menu.html");
Here, HTML file is loaded and css also loaded but script file is not loading in the page
<script src="js/utility.js"></script>
I tried to declare the above script file inside the head and inside the body. Both are not working.
Check your relative path to the utility.js file and make sure to load juery.js library before load utility.js file.
and finally try this,
<script type="text/javascript" src="${pageContext.request.contextPath}/js/utility.js"></script>
to load the utility.js file.
I think you forget to add jquery.min.js file. use below code.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/utility.js"></script>
</head>
jQuery may only execute your code with the type attribute set to "text/javascript", per this bug filed a long time ago:
http://bugs.jquery.com/ticket/3733
Try this ...
<script type="text/javascript" src="http://your.cdn.com/first.js"></script>
<script type="text/javascript">
loadScript("http://your.cdn.com/second.js", function(){
//initialization code
});
</script>
The jQuery code that adds HTML to the DOM always strips out <script> tags. It runs them and then throws them away.
An exception to that behavior is when you use "$.load()" with the hack that allows you to load a fragment of a page:
$.load("http://something.com/whatever #stuff_I_want", function() { ... });
In that case, the scripts are stripped and not evaluated/run.
I'm trying to understand how to modularize the Backbone ToDo tutorial
Originally everything is inside the same file, but if I try to extract to another file:
var TodoView = Backbone.View.extend({
...
});
then this throws an error:
var view = new TodoView({model: todo});
**Uncaught TypeError: undefined is not a function**
It's probably due to a scope issue, but I don't know how to create a reference inside the $(function() so I can create this new object inside the main function.
Assuming that your first code part is TodoView.js,
and your second code part is app.js.
Write your html file like this,
<html>
<head>
<script type="text/javascript" src="js/TodoView.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
// your dom
</body>
</html>
(Edited, at 2015-07-27)
sorry for my late reply.
how about this?
<html>
<head></head>
<body>
<!-- your dom -->
<script type="text/javascript" src="js/TodoView.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
In many case, most javascript codes are appended to just before </body>, so that javascript can use your dom!
You can use something like require.js to load your external files and manage dependancies.
Ok, the solution was to move the script references to the end of the body instead of inside the head tags.
I think that the reason is that TodoView.js is making use of templates that were defined in the body, and since the js file was being loaded before the body, the templates were not yet available.
I am trying to call a function written in one JavaScript file from another JavaScript file. I have the following code, but it doesn't work:
My HTML file
<script type="text/javascript" src="js1.js"></script>
<script type="text/javascript" src="js2.js"></script>
<script language="javascript">
js1();
</script>
js1.js
function js1()
{
alert("Hello from js1");
js2();
}
js2.js
function js2()
{
alert("Hello from js2");
}
What can I do?
Try changing the order
<script type="text/javascript" src="js2.js"></script>
<script type="text/javascript" src="js1.js"></script>
<script language="javascript">
js1();
</script>
Because you call js2(); inside js1.js, so the script js2.js should be executed before.
In your case, i think it should still work without changing orders like this because you call js2(); inside a function. When this script is executed:
function js1()
{
alert("Hello from js1");
js2();
}
Even the js2.js is not executed yet, but you do not actually call js2(); at this time.
Just try it to see if it works.
I'm going to assume that's your entire HTML page.
In order to have those scripts run, you need to have those JavaScript files in the same folder as your webpage, and to actually have a proper HTML page!
In your HTML page, you need to include the references to your js1 and js2 files in either the head or body, and include the script you've written in the HTML page itself in the body so that it'll execute when it's loaded:
<!DOCTYPE html>
<!-- ^ Declaring this DOCTYPE means this is a HTML5 page. -->
<html>
<head>
<!-- This will load your scripts into the document. -->
<script src="js1.js"></script>
<script src="js2.js"></script>
<!--
In a HTML5 page, you don't need to include the
'type="text/javascript"' attribute on script tags.
They're treated as having that by default, unless you say otherwise.
-->
</head>
<body>
<!--
You could also include your scripts here, but I'll
just leave these commented out since they're already included.
<script src="js1.js"></script>
<script src="js2.js"></script>
-->
<script>
js1();
</script>
<!--
You don't need 'language="javascript"' on a script tag.
Use the type attribute, or nothing in a HTML5 page.
-->
</body>
</html>
I'm trying to re-create this locally: http://jsfiddle.net/janpetras/wzBu8/
Granted, it shouldn't be that complicated, but I can't get it to work.
This is the code:
$(function(){
var moneyEarned,yearlySalary,secondSalary;
$("#startEarning").click(function(){
moneyEarned = 0;
var hourlySalary = $("#hourlySalary").val();
if(hourlySalary.length > 0) {
secondSalary = hourlySalary / 3600;
} else {
yearlySalary = $("#yearlySalary").val();
secondSalary = yearlySalary / 7200000;
}
setInterval(updateMoneyEarned, 1000);
});
function updateMoneyEarned() {
moneyEarned += secondSalary;
$("#moneyEarned").html(accounting.formatMoney(moneyEarned));
}
});
I want to put the Javascript code into a separate "script.js" file. I made the file, correctly linked to it in the HTML, I included jQuery and the accounting.js and everything, and it's not working, not updating.
I tried putting the code straight into the HTML and it's working if I do that, so clearly the problem is the way I make the script.js. I just copied/pasted that code, is there more to it? What am I doing wrong?
Remember that you have to do things in order. You can't include this file if you didn't include jQuery before.
<html>
<head>
<title>...</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="path/to/your/script.js"></script>
</head>
<body>
<!-- your content -->
</body>
</html>
After you have the correct order, you will be able to execute your scripts. If your $(function(){ ... }); call doesn't work, try using it this way:
$(document).ready(function() {
// Your code here
});
and see if it works.
In your jsfiddle i can see that you were including accounting.js in css section:
<script src="//cdn.jsdelivr.net/accounting.js/0.3.2/accounting.min.js"></script>
I moved it to the html section and it started working.
http://jsfiddle.net/GvAzM/1/