This question already has answers here:
Javascript infamous Loop issue? [duplicate]
(5 answers)
Closed 9 years ago.
for (var i = 0; i < 10; i++) {
array.push($("" + i + ""));
$("#row").append(array[i]);
array[i].click(function () {
changeval(i);
console.log(i);
});
}
My problem is that the function changeval(i) becomes always the same value 10 of i.
I try to create buttons with onclick-function in this for-loop. I need a hint.
I would separate the initial adding of the buttons and the 'click' action.
for (var i = 0; i < 10; i++) {
array
.push($("<a href=\"#\" data-role=\"button\" data-inline=\"true\">"
+ i + "</a>"));
$("#row").append(array[i]);
array[i].click(function() {
changeval(i);
console.log(i);
});
}
Would be split up to:
for (var i = 0; i < 10; i++) {
array.push("<a href=\"#\" data-role=\"button\" data-inline=\"true\">"
+ i + "</a>");
$("#row").append(array[i]);
};
$('#row').on('click', 'a', function() {
changeVal($(this).text());
console.log($(this).text());
};
Also note that variables and functions within javascript should be written in CamelCaseForBetterReadability. Also note that I got rid of the $() surrounding the array items. Lastly, if you do not want to escape the quotations within your string, you can use a single quotation.
Look into JS closures, the value of i is set to the last iteration of the loop. Wrap that in a self-executing func with i as the param:
for (var i = 0; i < 10; i++) {
(function(i) {
array
.push($("<a href=\"#\" data-role=\"button\" data-inline=\"true\">"
+ i + "</a>"));
$("#row").append(array[i]);
array[i].click(function() {
changeval(i);
console.log(i);
});
})(i)
}
Use a closure, e.g.
for (var i = 0; i < 10; i++) {
(function(i) {
array[i].click(function() { . . . } );
)(i);
}
If you're using jQuery (seems like it if you're using .click :) you can use
http://api.jquery.com/jQuery.each/
to loop through elements and acheive this same functionality.
Related
Im trying to simulate a Typewriter effect with javascript.
Theorically it should work with my code:
function TypeWriteToDoc(txt, id, x){
document.getElementById(id).innerHTML = document.getElementById(id).innerHTML + txt.charAt(x);
}
function TypeWrite(txt,id){
for (var i = 0; i < txt.length; i++){
setTimeout(function() {
TypeWriteToDoc(txt, id, i);
}, 1000*(i+1));
}
}
That should be it, when i call TypeWrite("example", "p_test"); it should write each character of "test" in the "p_test" html. I think the problem its not on my code since when i call the function without using setTimeout it works like in the code below:
function TypeWriteWithNoSettimeout(txt, id){
for (var i = 0; i < txt.lenght; i++){
TypeWriteToDoc(txt, id, i);}
}
This is a common issue with var in for-loops with callback functions.
The easiest solution? Just use let instead. let has support in all major browsers.
function TypeWrite(txt,id){
for (let i = 0; i < txt.length; i++){
setTimeout(function() {
TypeWriteToDoc(txt, id, i);
}, 1000*(i+1));
}
}
Similar to the previous response but rather than appending original text along with div.innerHtml, I adjusted it to be just the text char which simulates more of a typewriter feel. To increase the delay, I multiplied the index with 1000 rather than adding it since the larger increments are more visible.
function TypeWriteToDoc(txt, id, i) {
setTimeout(function() {
var div = document.getElementById(id)
div.innerHTML +=txt.charAt(i)
}, 1000 * (i))
}
function TypeWrite(txt,id){
for (var i = 0; i < txt.length; i++) {
TypeWriteToDoc(txt, id, i)
}
}
TypeWrite('example', 'p_test')
<div id="p_test"></div>
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 5 years ago.
The following code works great. It pushes 10 unnamed functions into an array and then successfully executes the 7th item in the array.
var storeStuff = [];
for (let i = 0; i < 10; i++) {
storeStuff.push(function() {
console.log(i * i);
});
}
storeStuff[6]();
However the test function above is tiny. If I had a large function with many lines of code I'd likely want to declare it outside of the push.
For example what if I wanted to push a previously defined function and later invoke it like the example below?
var storeStuff = [];
function externalFunction(temp) {
console.log(temp * temp)
}
for (let i = 0; i < 10; i++) {
storeStuff.push(externalFunction(i));
}
storeStuff[6]();
Unfortunately this doesn't work as written and everything I've tried crashed and burned. What am I getting wrong?
Use function declaration as below
var storeStuff = [];
externalFunction = function(temp) {
console.log(temp * temp)
}
for (let i = 0; i < 10; i++) {
storeStuff.push(externalFunction);
}
storeStuff[6](6);
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 8 years ago.
Im working with the gm npm module that deals with image manipulation. and i have this code.
for(i=0;i < 4;i++){
gm("www/img/" + image[i]).crop(550, 406, 0, 0).write(function(err) {
console.log(this.outname + " created :: " + arguments[3]); //success
});
}
this loop is meant to loop through the images array and crop each photo, but it only crops the last one. i think its something to do function invocation and callbacks, but not advanced yet for that level.
Change your code to:
for (var i = 0; i < 4; i++) {
(function (i) {
gm("www/img/" + image[i]).crop(550, 406, 0, 0).write(function(err) {
console.log(this.outname + " created :: " + arguments[3]); //success
});
}).call(this, i);
}
otherwise the value of i will be 3 each time your callback is being invoked.
You need to create a "closure" over the variable
Js has a function scope.
for (i = 0; i < 4; i++)
{
(function (a)
{
gm("www/img/" + image[a]).crop(550, 406, 0, 0).write(function (err)
{
console.log(this.outname + " created :: " + arguments[3]); //success
});
}).call(this,i)
}
or
that=this;
for (i = 0; i < 4; i++)
{
(function (a)
{
gm("www/img/" + image[a]).crop(550, 406, 0, 0).write(function (err)
{
console.log(that.outname + " created :: " + arguments[3]); //success
});
})(i)
}
edit :
Also - I would also keep a reference to the arguments since now , after IIFE - the arguments is changing.
you can keep your arguments via :
var args= Array.prototype.slice.apply(arguments)
example :
function g()
{
for (i = 0; i < 4; i++)
{
(function (a)
{
console.log(arguments); //huh ? arguments are not a,b,c !!! anymore
})(i);
}
}
g('a','b','c') // 0,1,2,3
so you do need to keep reference to the arguments cuz their changed after IIFE.
I'm creating a matching game and I'm trying to add a class from an array to match against.
The code I have below creates the classes I need, then randomizes them.
My problem is in the randomizeDeck function. I'm trying to add each of the classes to the specified element twice. When I console.log the code the classes gets added to the first six elements but not the last six, which I need it to do so that I have the classes to match against in the matching game I'm creating.
var cardDeck = new Array();
function createDeck() {
for (i = 1; i <= 6; i++) {
cardDeck.push("card-" + i);
}
}
createDeck();
var randDeck = cardDeck.sort(randOrd);
function randomizeDeck() {
card.each(function(i){
$(this).addClass(randDeck[i]);
});
}
randomizeDeck();
I think your createDeck function needs to create 12 classes instead of 6. Just push each one twice:
function createDeck() {
for (i = 1; i <= 6; i++) {
cardDeck.push("card-" + i);
cardDeck.push("card-" + i);
}
}
Then you'll have an array of 12 classes (2 each of 6 unique classes), which will be randomized and assigned to the 12 cards.
I suggest a separate variable to keep track of the index, rather that the each index. Once you've gone through the pack once, it might be a good idea to shuffle the deck again so the order is different on the second pass. YMMV.
function sortCards(randOrd) {
randDeck = cardDeck.sort(randOrd);
}
function randomizeDeck() {
var count = 0;
cards.each(function(i) {
if (i === 6) { count = 0; sortCards(randOrd); }
$(this).addClass(randDeck[count]);
count++;
});
}
Your randomizeDeck() function can be rewritten to use the same array of class names twice:
function randomizeDeck() {
card.each(function(i){
if(i < 6)
$(this).addClass(randDeck[i])
else
$(this).addClass(randDeck[i-6]);
});
}
Note: I would rewrite the variable card as $cards so that you know it's a jQuery object and in this case a collection of them. Otherwise, its hard to tell it apart from any other javascript var.
Try something like this - it's tested now updated
SEE THIS FIDDLE
http://jsfiddle.net/8XBM2/1/
var cardDeck = new Array();
function createDeck() {
for (i = 1; i <= 6; i++) {
cardDeck.push("card-" + i);
}
}
createDeck();
var randDeck = cardDeck.sort();
alert(randDeck);
function randomizeDeck() {
var x = 0;
$('div').each(function(i){
if ( i > 5) {
$(this).addClass(randDeck[x]);
x++;
} else {
$(this).addClass(randDeck[i]);
}
});
}
randomizeDeck();
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 9 years ago.
I am trying to execute the following code:
for (var i = 0; i <= 9; ++i) {
State.prototype["button" + i.toString()] = function () {
console.log("I am a digit button" + i.toString());
this.setValue(i.toString());
};
}
But it is wrong, because the i variable is common for all the function created.
For example I want the function State.prototype.button0() to work as:
console.log("I am a digit button" + "0");
this.setValue("0");
How to do it?
Pass it to a function, so that the value of i doesn't change:
for (var i = 0; i <= 9; ++i) {
(function(i){
State.prototype["button" + i.toString()] = function () {
console.log("I am a digit button" + i.toString());
this.setValue(i.toString());
};
})(i);
}