I am learning JavaScript and I do not understand how to pass an ID from html into a JavaScript function.
My CSS page has this here:
#quizclock (with properties here)
And on my HTML page I have a javascript function as so:
<script type="text/javascript">
var seconds = 0;
var clockId;
function runClock()
{
seconds + 1;
quizclock = seconds; //right here is my problem.
}
function startClock()
{
showQuiz();
runClock();
setInterval("runClock()", 1000);
}
function stopClock()
{
clearInterval(runClock);
gradeQuiz();
return = correctAns;
alert("You have " + correctAns + " correct out of 5 in " + quizclock + " seconds.");
}
</script>
So I need to use the id quizclock in the function. Any tips?
I noticed a few other problems with your code, I've commented the fixes and added a couple of other tips too.
var seconds = 0;
var clockId;
var correctAns;
// Lets get a reference to the quizclock element and save it in
// a variable named quizclock
var quizclock = document.getElementById('quizclock');
function runClock() {
// seconds + 1;
// This calculates seconds + 1 and then throws it away,
// you need to save it back in to the variable
// You could do that with:
// seconds = seconds + 1;
// But it would be even better with the shorthand:
seconds += 1;
// set the HTML inside of the quizclock element to new time
quizclock.innerHTML = seconds;
}
function startClock() {
showQuiz();
runClock();
// setInterval("runClock()", 1000);
// When using setInterval and setTimeout you generally just
// want to directly pass it the function by name. Passing it
// a string "runClock()" is in effect actually running
// eval("runClock()"), eval should be avoided unless you
// really need it.
// setInterval returns a number which identifies the interval,
// you need to save that number, you'll need it when you
// call clearInterval
clockId = setInterval(runClock, 1000);
}
function stopClock() {
// clearInterval takes the id that setInterval
// returned to clear the interval
clearInterval(clockId);
gradeQuiz();
// you had this alert statment after the return statement,
// it would have never run, return statements end the
// function and anything after them is ignored
alert("You have " + correctAns + " correct out of 5 in " +
quizclock + " seconds.");
//return = correctAns;
// the return statement doesn't need a =,
// return = correctAns says set a variable named return to the
// value of correctAns since return is a reserved word,
// that should generate an error
return correctAns;
}
Some useful reference links:
setInterval
clearInterval
getElementById
Reserved Words (Things that can't be used as variable names)
Assignment Operators (More shortcut operators listed here)
Introducing the JavaScript DOM
An Inconvenient API: The Theory of the Dom
If this is for a formal class you might have to just use basic DOM methods to get elements (getElementById, etc). If you are just learning on your own I would encourage you to learn a DOM library. I would suggest jQuery, it is easy to learn and is now more or less the de facto standard. With jQuery instead of document.getElementById('quizclock') you could just do this: $('#quizclock'). Using jQuery makes your code a little shorter, standardizes things between different browsers and helps protect you from bugs in those browsers.
You are just a beginner now, in small examples like this you don't need to worry about global variables, but you should know that it is generally a bad idea to use too many of them. What if another function on the page also used a global variable named seconds? It might change seconds and screw up your timer. This is getting a little advance, but one way to avoid this is to wrap your code in a self-invoking anonymous function:
(function () {
var seconds = 0;
// inside here seconds is visible and can be used
}());
// outside seconds is not declared, it will return undefined.
Unfortunately any functions inside will also not be visible on the outside, so attaching them via onclick= wouldn't work but you could (should) attach them in using the DOM:
var submitButton = document.getElementById('submitanswers'); // you'll have to give the button an id
submitButton.addEventListener('click', stopClock, false);
Again, using jQuery would make this even easier:
$('#submitanswers').on('click', stopClock);
Likewise if you use jQuery, it already forces you to wrap your code in a function which will keep your variables out of the globalnamespace:
$(document).ready(function () {
var seconds;
// again seconds is visible here
});
// but not here
You can select an element with:
var quizclock = document.getElementById('quizclock');
You can then set the value with:
quizclock.innerHTML = seconds;
Related
Im relatively new to JS coding, and can't get this little number to work. Can anyone tell me what I'm doing wrong?
My JavaScript is:
incrementScroll = function() {
window.scrollBy(0, 3) ;
}
startScrollLoop = function() {
scrollLoopId = setInterval( "incrementScroll", 5) ;
}
stopScrollLoop = function() {
clearInterval( scrollLoopId ) ;
}
And my HTML is:
<button onclick="startScrollLoop()">AUTO SCROLL</button>
<button onclick="stopScrollLoop ()">STOP SCROLL</button>
Again, many thanks for help. New to all of this and need to make a project work by morning.
Cheers.
The first argument to setInterval() should be a function reference, or non-ideally, a string to be eval()'d, which would be a complete function call with (). So remove the quotes:
// Pass the reference to incrementScroll,
// not a quoted string containing its name.
scrollLoopId = setInterval(incrementScroll, 5);
And to clear the scroll, you will need to define scrollLoopId at a higher scope with var.
// Define outside the function so it is available
// in scope of the stopScrollLoop() function when needed...
var scrollLoopId;
var startScrollLoop = function() {
scrollLoopId = setInterval( incrementScroll, 5) ;
}
Jsfiddle demo
(uses a slower scroll speed to give you a chance to click the stop button in the middle of the text)
Note that it is good practice to use the var keyword with each of these. even though they would end up at window scope anyway (assuming they're not being defined inside another function).
// Define with var
var incrementScroll = function() {
window.scrollBy(0, 3);
}
I want to have multiple numbers on my web page "spin up" as the page loads, giving an impression like a fruit machine.
This involves a simple function with a delayed loop. The way to do this seems to be to use setTimeout recursively. This works fine for just one number on the page.
However for multiple numbers spinning at the same time, each needs its own spinner object. I used prototypes like this:
var Spinner = function(id){
this.element = $('#' + id);
this.target_value = this.element.text()
this.initial_value = this.target_value - 30;
};
Spinner.prototype.spinUp = function() {
loop(this.element);
function loop(element) {
element.html(this.initial_value += 1);
if (this.initial_value == this.target_value) {
return;
};
clr = setTimeout(loop(element), 30); // 30 millisecond delay
};
};
var Spinner1 = new Spinner('number')
Spinner1.spinUp();
However putting a recursive function inside the prototype method causes a big crash. Can you see a way around this?
Many thanks!
Derek.
A couple of issues:
loop() is not how you pass a function, it's how you invoke a function.
You are not calling the function as a method of the object
Try this:
Spinner.prototype.spinUp = function() {
var loop = function() {
this.element.html(this.initial_value += 1);
if (this.initial_value == this.target_value) {
return;
};
setTimeout(loop, 30); // 30 millisecond delay
}.bind(this); //Just flat out bind the function to this instance so we don't need to worry about it
loop();
};
Demo http://jsfiddle.net/KAZpJ/
When you say:
clr = setTimeout(loop(element), 30);
you are "calling" the function (then and there), and passing the value it returns as the first parameter to setTimeout(..).
You would want an anonymous function doing that job:
setTimeout(function(){loop(element);}, 30);
I'm trying to learn Javascript animations but, as I thinked, it doesn't work xD.
UPDATED DELETING PASTING MISTAKES
I tried
function click_home()
{
for(i=0;i<=10;i++)
{
setTimeout(setOpacity("div_home",i),200);
}
};
function setOpacity(id,value) {
document.getElementById(id).style.opacity = value/10;
document.getElementById(id).style.filter = 'alpha(opacity=' + value*10 + ')';
};
And HTML:
<td id="button_home" onclick="click_home();"> Home </td>
But obviously is wrong.
What can I do to do this?:)
Thanks to all replies :)
Firstly, you've got a syntax error in the for loop (change the , to a ;).
You need to pass a function to setTimeout, so it can execute it periodically. What you're currently passing setTimeout is the result of executing setOpacity("div_home",i) (i.e. undefined).
function click_home()
{
for(i=0;i<=10;i++)
{
setTimeout(function () {
setOpacity("div_home",i)
}, 200);
}
};
What you'll also find is you value of i will always end up being the last value, because of the scope of i, to fix this you need to add a new scope level. For a more detailed description on this problem, see How to reference right value of `i` in a callback in a loop?
function click_home()
{
function delay(i) {
setTimeout(function () {
setOpacity("div_home",i)
}, 200);
}
for(i=0;i<=10;i++)
{
delay(i);
}
};
As noted in the comments, you will find all of your timeouts will execute after 200ms.. to get the animation you'll need to stagger the execution. The simplest way would be to add i to the delay calculation; i.e. 25 * i.
I'm not sure why you're setting the opacity and filter to 0 first in your setOpacity function; these resets will immediately be set to the values that follow.
You should also look at caching the result of document.getElementById(id).style, as you're looking it up 4 times (and will be 2 if you remove the unneeded resets described above).
function setOpacity(id,value) {
var style = document.getElementById(id).style;
style.opacity = value/10;
style.filter = 'alpha(opacity=' + value*10 + ')';
};
Is there a way in Javascript to define a function and immediately call it, in a way that allows it to be reused?
I know you can do one-off anonymous functions:
(function(i) {
var product = i * i;
console.log(product);
// Can't recurse here because there's no (ECMA standard) way for the
// function to refer to itself
}(2)); // logs 4
Or you can name a function then call it afterwards:
function powers(i) {
var product = i * i;
console.log(i * i);
if (product < 1e6) { powers(product) };
}
powers(2); // Logs 4, 16, 256...
But is there a cleaner way of defining and calling a function in one go? Sort of like a hybrid of both examples?
Not being able to do this isn't preventing me from doing anything, but it feels like it would be a nice expressive way to write recursive functions or functions that need to be run on $(document).ready() but also later when situations change, etc.
You can try:
(window.powers = function(i) {
/*Code here*/
alert('test : ' + i);
})(2);
Click
Working link : http://jsfiddle.net/SqBp8/
It gets called on load, and I have added it to an anchor tag to change the parameter and alert.
If all you want is access the function within its own body, you can simply specify a name after the function keyword:
> (function fac (n) {
return (n === 0 ? 1 : n*fac(n-1));
})(10)
3628800
This is a standard feature (see ECMA-262, ed. 5.1, p. 98).
All the answers here are close to what you want, but have a few problems (adding it to the global scope, not actually calling it, etc). This combines a few examples on this page (although it unfortunately requires you to remember arguments.callee):
var test = (function() {
alert('hi');
return arguments.callee;
})();
Later, you can call it:
test();
If you don't care about the return value, you can do this.
var powers = function powers(i) {
var product = i * i;
console.log(i * i);
if (product < 1e6) { powers(product) };
return powers;
}(2);
I'm trying to write some JS replicating jQuery's fadeIn and fadeOut functions. Here's the code I have so far:
function fadeIn(elem, d, callback)
{
var duration = d || 1000;
var steps = Math.floor(duration / 50);
setOpacity(elem,0);
elem.style.display = '';
for (var i = 1; i <= steps; i++)
{
console.log(i/steps + ', ' + (i/steps) * duration);
setTimeout('setOpacity("elem", '+(i / steps)+' )', (i/steps) * duration);
}
if (callback)
setTimeout(callback,d);
}
function setOpacity(elem, level)
{
console.log(elem);
return;
elem.style.opacity = level;
elem.style.MozOpacity = level;
elem.style.KhtmlOpacity = level;
elem.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
I'm having troubles with the first setTimeout call - I need to pass the object 'elem' (which is a DOM element) to the function setOpacity. Passing the 'level' variable works just fine... however, I'm getting "elem is not defined" errors. I think that's because by the time any of the setOpacity calls actually run, the initial fadeIn function has finished and so the variable elem no longer exists.
To mitigate this, I tried another approach:
setTimeout(function() { setOpacity(elem, (i / steps));}, (i/steps) * duration);
The trouble now is that when the function is called, (i/steps) is now always 1.05 instead of incrementing from 0 to 1.
How can I pass the object in question to setOpacity while properly stepping up the opacity level?
Your "another approach" is correct, this is how it's usually done.
And as for the problem of i always being a constant, that's how closures work!
You see, when you create this function that does something with i (like function() { alert(i); }), that function, as they say, 'captures', or 'binds' the variable i, so that variable i does not die after the loop is finished, but continues to live on and is still referenced from that function.
To demonstrate this concept, consider the following code:
var i = 5;
var fn = function() { alert(i); };
fn(); // displays "5"
i = 6;
fn(); // displays "6"
When it is written in this way, the concept becomes a bit more evident, doesn't it? Since you're changing the variable in the loop, after the loop is finished the variable retains it's last value of (1+steps) - and that's exactly what your function sees when it starts executing.
To work around this, you have to create another function that will return a function. Yes, I know, kind of mind-blowing, but bear with me. Consider the revised version of my example:
function createFn( theArgument )
{
return function() { alert( theArgument ); };
}
var i = 5;
var fn = createFn( i );
fn(); // displays "5"
i = 6;
fn(); // still displays "5". Voila!
This works, because the fn function no longer binds the variable i. Instead, now it binds another variable - theArgument, which has nothing to do with i, other than they have the same value at the moment of calling createFn. Now you can change your i all you want - theArgument will be invincible.
Applying this to your code, here's how you should modify it:
function createTimeoutHandler( elemArg, iDivStepsArg )
{
return function() { setOpacity( elemArg, iDivStepsArg ); };
}
for (var i = 1; i <= steps; i++)
{
console.log(i/steps + ', ' + (i/steps) * duration);
setTimeout( createTimeoutHandler( elem, i/steps ), (i/steps) * duration);
}
Your first approach is evaluating code at runtime. You are most likely right about why it's failing (elem is not in the scope in which the code is eval'd). Using any form of eval() (and setTimeout(string, ...) is a form of eval()) is a general bad idea in Javascript, it's much better to create a function as in your second approach.
To understand why your second approach is failing you need to understand scopes and specifically closures. When you create that function, it grabs a reference to the i variable from the fadeIn function's scope.
When you later run the function, it uses that reference to refer back to the i from fadeIn's scope. By the time this happens however, the loop is over so you'll forever just get i being whatever it was when that loop ended.
What you should do is re-engineer it so that instead of creating many setTimeouts at once (which is inefficient) you instead tell your setTimeout callback function to set the next Timeout (or you could use setInterval) and do the incrementing if your values inside that callback function.