I am new to javascript and I'm a bit confused about what I'm doing wrong.
so, I have functions defined in an external .js file like so...
var game = (function () {
function start_game() {
...
}
function step() {
...
}
...
}
Now I want my html page to call these functions; first start_game() once, and then step repeatedly every second or so.
I have tried following the code for doing this in HTML in several posts on this subject but in every case my code is never actually executed... What do I do?
Not sure why your wrapping all your named functions in an anonymous function like that. (Prob trying something like an IIF) However since your a beginner, take a step and start with something a little more basic.
<input type="button" onclick="start_game()" value="click to begin" />
<script>
function start_game() {
...
}
</script>
As for having something call a function repeatedly every x seconds. Have a look at something like setTimeout. http://www.w3schools.com/jsref/met_win_settimeout.asp
Related
I have a web page that load a lot of javascript files.
Each javascript do a specific action.
I'm using this model in each javascript file:
"use strict";
$(function() {
var self = this;
// some code
var func1 = function() {
// do some action
};
var runTimer = function() {
func1();
setTimeout(self.runTimer, 60000);
}
});
BUT "this" in this case point to html document and I would like to point to the function itself.
How can I achieve it?
Is there any better "model" to use?
My webpage is like a lot of widgets running at same time and each javascript file run a specific widget.
Thank you very much.
I am not seeing a proper reason for you doing this. If you want to assign a function to a variable just use:
var functionVariable = function() { ... }
Maybe if you tell us why you want to do this out answers will be more specific.
From what you've written it looks like you want to call func1() every 60 seconds. Rather than set up a function like runTimer() that recursively calls setTimeout, just use setInterval. Rather than having the function runTimer(), just use:
var timer = setInterval(func1, 60000);
and if/when you want to cancel this and stop func1 being called, use:
clearInterval(timer);
From what I can see you're only using self/this to achieve this, and there's a better/more straightforward way of doing this. If there's another reason you want to set self=this, can you add to your code sample or try to clarify what you want to acheive?
Have a look at the proxy function: it does exactly that
It keeps me from easily defining global variables and its often a nuisance. Why doesn't the code outside functions that are called execute? For example, if I call the function myFunction from HTML, this works...
function myFunction() {
var myObject = document.getElementById("myHTMLObject");
myObject.style.backgroundColor = "blue";
}
but not this...
var myObject = document.getElementById("myHTMLObject");
function myFunction() {
myObject.style.backgroundColor = "blue";
}
If I call the function from the HTML, only the code inside that function will run (unless that function calls other functions). Am I making a mistake or is there a way around this? I don't want to encompass all my code in a window.onload function.
P.S. I run my html on Chrome if it makes a difference.
Thanks for any help.
It does execute, and does when when the script runs, which is when the <script> element is parsed.
If you try to get an element that is added to the DOM by HTML that appears after the <script>, then it won't exist when you look for it so you will get nothing back.
If the <script> appears after the element, then you won't have a problem.
If this example:
var myObject = document.getElementById("myHTMLObject");
function myFunction() {
myObject.style.backgroundColor = "blue";
}
doesn't work, then here are a couple possible reasons:
The script is running too early and thus when you do document.getElementById("myHTMLObject");, the page has not yet been loaded and thus myHTMLObject does not exist yet.
You have more than one global definition of myObject and one is overwriting the other.
Your second coding example is recommended for a number of reasons:
Doesn't use a global variables which is advantageous (variables are private to within the function and can't create conflicts with any other code or be interfered with by any other code).
The functionality is entirely contained within the function
There are no timing related issues with when the initialization code is run because the DOM is searched only when the operation is about to be carried out.
Getting DOM objects when needed works better with dynamically added HTML.
A simple user, triggered operation is plenty fast getting a DOM object when needed.
I have a function that looks like this:
function outer() {
function inner_1() {
alert('inner_1');
}
function inner_2() {
alert('inner_2');
}
function inner_3() {
alert('inner_3');
}
inner_1();
inner_2();
inner_3();
}
I need to call outer(), but I want to replace inner_1() with another function.
I have tried this:
new_outer = outer;
new_outer.inner_1 = function() {
alert('my new inner function');
};
If I try to call the newly redefined inner_1 like this:
new_outer.inner_1();
it works as expected ('my new inner function' is alerted).
But if I try to call the outer function:
new_outer();
the old version of inner_1 is called.
I want to redefine inner_1 and the call outer. How can I achieve this?
This seems like a really bad idea so I am not going to post any code. However, if you are pursuing the answer for "educational purposes only", I will just hint that although you cannot easily redefine a function from outside its scope (as per your example), there is nothing stopping you from redefining a function attached to a function object.
I do think, however, there is a better solution to whatever the problem you are trying to solve is.
I'm trying to use:
<script type="text/javascript">
function myfunc() {
var param = 4;
alert("OK");
}
</script>
I call the function like this:
<a4j:jsFunction name="myfunc">
<a4j:actionparam name="param" assignTo="#{MyBean.myfield}"/>
</a4j:jsFunction>
But it does not work. In what may be the reason?
You misunderstood the purpose of <a4j:jsFunction>. It autogenerates a JavaScript function which you can then call from any JavaScript code in your view.
Your example,
<a4j:jsFunction name="myfunc">
<a4j:actionparam name="param" assignTo="#{MyBean.myfield}"/>
</a4j:jsFunction>
will autogenerate the following function
<script>
function myfunc(param) {
// Here some specific JSF Ajax script which assigns "param"
// to a managed bean property #{MyBean.myfield}
}
</script>
You do not need to define it yourself. You only need to invoke it yourself from some JavaScript code elsewhere. For example,
<span onclick="myfunc(4)">click here to set 4 in MyBean.myfield</span>
or
<script>
function someOtherFunction() {
var param = 4;
myfunc(param);
}
</script>
which is in turn to be used like
<span onclick="someOtherFunction()">click here to call someOtherFunction() which will in turn set 4 in MyBean.myfield</span>
See also:
<a4j:jsFunction> component reference
<a4j:jsFunction> showcase example
<a4j:jsFunction
is not used to call an function, it is used to define an function.
So, if MyBean.myfield is an int-field you can set the value 2 using:
<script>myfunc(2);</sript>
There's a bunch of different ways to call that function.
Two you will find particularly useful are:
This:
<body onload="myfunc();">
Example: http://ultimatemmo.webege.com/Test.html
and this:
Click here to execute function
Example: http://ultimatemmo.webege.com/Test2.html
Edit: added examples.
According you snippet of code, you have never called your function. Add myfunc(); within your script tag.
I want to call a Javascript function from Flash, which I can do with ExternalInterface, but the Javascript function takes a callback. Is there a way to give it a Flash callback?
I've thought of something like this:
ExternalInterface.addCallback("foo", function(){...});
ExternalInterface.call("theFunction", "foo");
But that wouldn't work since theFunction would attempt to do foo(), while it should really do swfObject.foo(). The problem is the page and its Javascript are not under my control (though I can request changes if really needed).
This is closely related to the first question in the related questions section.
Along the same lines as the answer to that question, you can do:
ExternalInterface.addCallback("foo", function() { /* ... */ }); // The callback
ExternalInterface.call("theFunction(function() { swfObject.foo(); })");
You're misunderstanding the documentation, I think. callback in this instance is just a reference to a function inside Flash, not a callback to something you call.
Basically, you use .call() to call a JS function from AS; and you use .addCallback() to tell the Flash Player which AS function should be called based on the name.
On your example, theFunction would get one parameter as being 'foo', which is the name that references your anonymous AS function. Not sure why you would want to pass the function like that, but if you need, you could just call it from JavaScript with
function theFunction(callback) {
// .. do something...
swfObject[callback]();
}
Now, if you don't have control over the JS/HTML side, I'm not sure if you can do that. Not sure why you'd need, anyway - JS calls are synchronous, as if they were running on the same thread, meaning the Flash Player will execute the JS code and only then return to the Flash Player... you don't have to wait for execution or anything.
Also, if you really need to control the page without touching the JS/HTML side, remember you can inject entire pieces of JS code via .call - it doesn't need to be a simple function call. You can create your entire functions from inside the SWF. For example,
var js:XML = <script><![CDATA[
// Javascript code...
]]></script>;
ExternalInterface.call(js);
Or, if you need the return data, you don't need a callback either - just do a simple call as in
// JS
function isNumberZero(__num) {
return __num == 0;
}
// AS
trace ("Is number zero = " + ExternalInterface.call("isNumberZero", 10));
Not sure if this helps at all. If not, it'd be good to have more information on what exactly you're trying to do.