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/
Related
I am playing around with an html template and I have noticed that the developer doesn't use RequireJS or anything else to require and call different functions from other node files. Instead, they used this in the html file to initialise and call the function:
<script src="../../assets.js/test.js"></script>
<script type="text/javascript">
$(document).ready(function(){
test.initSomeFunction();
});
</script>
And I've got the below code in assets/js/test.js which defines initSomeFunction in javascript:
test = {
initSomeFunction: function() {
//Some code
}
initAnotherFunction: function() {
//More code
}
}
(It would be helpful if someone can tell me what this method is called so that I can research it more.)
My problem arises when I try to do the same thing in my node app in the home directory /main.js. The node app works fine on its own but when I add something like this:
test2 = {
initMyFunction: function() {
console.log("I finally decided to work! Good luck...");
}
}
and modify my html file like this:
<script src="../../main.js"></script>
<script type="text/javascript">
$(document).ready(function(){
test.initSomeFunction();
test2.initMyFunction();
});
</script>
then it won't work. Can someone please point me to the right direction as I don't even know what to Google. I am trying to avoid using RequireJS or anything else as I am a total beginner and the method that the developer used sounds so simple and tempting.
I wish this answer will help you:
I am using express, so I do this to solved your problem!
main.js file's position:
modify app.js add:
app.use(express.static(path.join(__dirname, '/')));
Then, in the view file:
<html>
<head>
<script src="public/javascripts/jquery-1.10.2.min.js"> </script>
<script src="main.js"></script>
</head>
<body>
<script>
$(function () {
//test.initSomeFunction();
test2.initMyFunction();
})
</script>
</body>
</html>
Open the chrome Developer Tools. You will see the result.
Here's what I'm trying to do;
I have this HTML code:
<div id="background-color-random">
DIV CONTENT
</div>
And this javascript:
$(document).ready(function() {
var colors = ["#FFA347", "#FF5050", "#FF66FF", "#6699FF", "#00FF99"],
selectedColor = colors[Math.floor(Math.random()*colors.length)]
header = $("div#background-color-random");
header.css("background-color", selectedColor);
});
I want to impliment this on an HTML page. I know that you can load up a *.js file by using the script tags with src="..". But that doesn't seem to work.
The javascript creates a random color and then applies that to the background of a given 'div' in the HTML.
Now, I'm not good with javascript, so please be patient with me and simple answers are needed :)
I need to be able to get the javascript to load when requested from the HTML and then apply itself to the div with id="..".
You have a syntax error (missing a comma):
selectedColor = colors[Math.floor(Math.random()*colors.length)]
header = $("div#background-color-random");
Should be
selectedColor = colors[Math.floor(Math.random()*colors.length)],
header = $("div#background-color-random");
You are using jQuery, not pure javascript. That's a good thing...
but you also must add the jQuery library in your head tags, like this:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
You also need to put semi-colons (or commas, as RobM has corrected me, if between var assignments) at the end of each instruction. See line 3 in your code example.
If you want your js/jQuery code in a separate file, you can load the script code like this (again, usually done in the <head> tags):
<script src="filename.js" type="text/javascript"></script>
Or, you can include the js/jQ in the <head> tags of your document, like this:
<script type="text/javascript">
$(document).ready(function() {
var colors = ["#FFA347", "#FF5050", "#FF66FF", "#6699FF", "#00FF99"],
selectedColor = colors[Math.floor(Math.random()*colors.length)],
header = $("div#background-color-random");
header.css("background-color", selectedColor);
});
</script>
If including the script as an external file, you leave out the <script></script> wrapper from that file.
i have been trying to set up utterscroll and i cant seem to be able to
there is no clear instruction,
i put both files provide in order and i call the event but nothing
https://github.com/debiki/utterscroll
i cant even get it to work on a jsfiddle
<script src='jquery-scrollable.js'></script>
<script src='debiki-utterscroll.js'></script>
if (!Modernizr.touch) // if not a smartphone
debiki.Utterscroll.enable({
scrollstoppers: '.CodeMirror, .ui-resizable-handle' });
Now I've added an example HTML file that shows how you can enable Utterscroll on your page:
http://rawgit.com/debiki/utterscroll/master/utterscroll-example.html
(Linked from https://github.com/debiki/utterscroll)
What that page does, is it places this before </body>:
<script src='https://rawgithub.com/debiki/utterscroll/master/debiki-utterscroll.js'></script>
</body>
and this in the <head>:
<script type="text/javascript">
jQuery(function($) {
if (!Modernizr.touch) { // if not a smartphone
debiki.Utterscroll.enable();
}
});
</script>
I am using jQuery a lot, but sometimes I get stuck because my browser cannot see the jQuery library, or maybe loads the library after running the my JavaScript code.
Pseudo-code to explain my question:
<html>
<head>
I always load CSS here
I always load jquery here
</head>
<body>
<p class="link-style3"><span id="my_tag"><span>Bize Hemen Yazın</span></span></p>
<script>
$(function() {
$('#my_tag').click(function(e) {
alert('tesrt');
});
});
</script>
</body>
</html>
I always put my stuff in the order like below, but this doesn't work now. When I click the <span id="my_tag">, it doesn't do anything, and doesn't return any error.
what should I do?
Here is the entire code jsfiddle
Try to avoid some syntax errors like(suggestable only)
<script type="text/javascript">
$(function() {
$('#my_tag').click(function() {
alert('tesrt');
});
})
</script>
and put your code at the top after you load the js files
A few things you can do:
inspect your document (network pane in devtools) to see if everything
is loading correctly
Move your scripts to the bottom of the page
use $(document).ready(function(){ ... });
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" />