0

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?

Improve this question

3 Answers 3

Reset to default
1

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
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

I did as you said, and I dont get any errors, however it doesnt display the arrayvalues into my divs. Actually when I tried typing out the rows with $(".printAnimal3").append("animals[i]"); that doesnt work either..
this is wrong. he has too many errors in his code for this to work with this suggestion. for example: var animals = [4]; should be var animals = []; or var animals = new Array(); $this should be $(this) you are correct about the for loop i variable needing to be created inside if it isn't first created outside
excuse me She has... sorry! :)
also without your markup to reference it makes it very difficult to diagnose where your problem lies. $('.printAnimal3').append("animals[i]"); will not work because you need to remove the quotes from animals[i] as it is not a literal string. As well, your .printAnimals3 selector may be incorrect if you are using an ID or just not using a class.
My bad about the minor errors, was trying different ways out of desperation.. I've double checked all that now, and with a simple console log shows that the array is empty -.- one sec I'll upload it to jsfiddle.. Edit: jsfiddle.net/SjHgh
|
0

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);
}
Improve this answer

2 Comments

I tried making the array nice and empty, but still doesnt work. Im trying to make a dice game, that has 5 dices, each dice has 6 sides (regular dice), that rolls all 5 dices and shows the result in the divs.
What does that have to do with the original answer?
0

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>");
}
Improve this answer

1 Comment

Thanks! That would work except I have 5 existing divs that I want the value to be printed into :-) Colleen found my problem!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.