CODEWITHSUNDEEP
javascriptjqueryhtml
Camathon
Camathon

Reputation: 524

Get array values and put them into different divs with a for loop?

I'm trying hard to learn javascrip+jquery on my own, and also trying to learn it right. Thus trying to enforce the DRY rule.

I find myself stuck with a problem where I have an array,

var animals = [4];

a function,

var legs = function(amount){
    this.amount = amount;
    this.body = Math.floor(Math.random()*amount)+1;
}

and an evil for loop. I also have 5 div's called printAnimal1, printAnimal2 and so on.. In which I wish to print out each value in the array into.

for(i = 0; i < animals.length; i++){
        animals[i] = new legs(6);
        $(".printAnimal"+i).append("animals[i]");
}

I feel as if I'm close to the right thing, but I cant seem to figure it out. I also tried something like this:

for(i = 0; i < animals.length; i++){
        animals[i] = new legs(6);
            $this = $(".printAnimal");
            $(this+i).append("animals[i]");
}

But one of the problems seem to be the "+i" and I cant make heads or tails out of it.

I also know that I can simply do:

 $(".printAnimal1").append("animals[i]");
 $(".printAnimal2").append("animals[i]");
 $(".printAnimal3").append("animals[i]");
...

But that would break the DRY rule. Is it all wrong trying to do this with a for loop, or can it be done? Or is there simply a better way to do it! Could anyone clarify?

Upvotes: 0

Views: 2047

Answers (3)

Colleen
Colleen

Reputation: 25479

Your first attempt should be fine, as long as you take "animals[i]" out of quotes in your append() call ($(".printAnimal"+i).append(animals[i]))

Also, I assume you declared var i; outside your for loop? If not, you'll want to declare it in your for loop (for(var i=0....)

EDIT: problems with your fiddle

  1. you never call startGame()
  2. you didn't include jQuery
  3. you can't (as far as I know) append anything that isn't html-- in your case, you're trying to append a js object. What do you want the end result to look like?

http://jsfiddle.net/SjHgh/1/ is a working fiddle showing that append() works as you think it should.

edit: forgot to update the fiddle. Correct link now.

EDIT: reread your response to the other answer about what you want. http://jsfiddle.net/SjHgh/3/ is a working fiddle with what you want. More notes:

  1. You didn't declare new when you called DICE
  2. you have to reference the field you want, (hence dices[i].roll), not just the object

Upvotes: 1

DanC
DanC

Reputation: 8805

Adding another answer as per your comment

var i, dicesThrown = [];

function throwDice(){
    return Math.ceil(Math.random() * 6);
}

//Throw 5 dices
for (i=0 ; i<5 ; i++){
    dicesThrown.push( throwDice() );
}

//Show the results
for (i=0 ; i<5 ; i++){
    $("body").append("<div>Dice " + (i+1) + ": " + dicesThrown[i] +"</div>");
}

Upvotes: 0

DanC
DanC

Reputation: 8805

Just a few comments:

This is declaring an array with only one item and that item is the number 4

var animals = [4];

In case you still need that array, you should be doing something like:

var animals = []; // A shiny new and empty array

and then add items to it inside a for loop like this:

animals.push(new legs(6)); //This will add a new legs object to the end of the array

Also, what is the content that you are expecting to appear after adding it to the div?

If you want the number of legs, you should append that to the element (and not the legs object directly).

for(i = 0; i < animals.length; i++){
    animals.push(new legs(6));
    $(".printAnimal"+i).append(animals[i].body);
}

Upvotes: 0

Related Questions