Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Roland O'Donnell
Roland O'Donnell
5,667 Points

Need help with styling array elements!

hi I've got a problem i know basic html css javascript and jquery but i can't figure out(well given up) on how to style individual array elements . lets say 6 numbers background a diff color! I've tried so many (that will work for sure techniques) but no i bet I've come one comma short of success as I'm still not 100% with syntax. i know its cheating but can someone just tell me a way or even a couple of ways this can be done! i have tried and I'm over being stuck coz my learning has halted becoz of this!

Christian Andersson
Christian Andersson
8,712 Points

I'd be happy to assist, just please add your code (html, css, and javascript) that you've tried - even if it's wrong.

Roland O'Donnell
Roland O'Donnell
5,667 Points

ok well here is one part of the code..what i want to do is style the individual array elements. so lets take the array (lottoNumbers) i want to make them look like balls with...

background-radius: 50%; background-color: blue; and so on...

I've tried using a for loop in javascript to iterate thru the array elements then use jquery to style but no success. I've deleted all my attempts..in shame I've tried appending to the DOM and so forth..can you please just show me how would do it?

var myNumbers = [];

var userName = prompt("Welcome to Jackpot lottery!! Enter your first name then choose your 6 lucky numbers ");

userName = userName.toUpperCase();

for (var z = 0; z < 6; z++){

if (myNumbers > 45) { 
    continue;
    z--; }

    myNumbers.push(parseInt(prompt("Hey " + userName + "! Enter a number between 1-45.  Your Numbers: (" + myNumbers + '), ' )));
    (myNumbers > 45)

}

prompt("Now click OK to start the jackpot lotto mega draw!!");

var lottoNumbers = theDraw();

var numbersCorrect = arraysEqual(myNumbers,lottoNumbers);

function arraysEqual (array1, array2) {
    var correctBalls = 0;

    for(var j = 0; j < 6; j++) { 

        for(var i = 0; i < 6; i++) {

            if(array1[j] === array2[i]) {


                document.write(" ball number "  +  myNumbers[j] + " is a winner! " +  '</br>');

                correctBalls ++;
            } 
        }
    }
    return correctBalls;    
}
Christian Andersson
Christian Andersson
8,712 Points

Roland O'Donnell I can't help you style them with the provided code because I need to see the html elements themselves. Please provide ALL code - even if it's wrong. Don't be ashamed, this is a learning platform and we're all here to learn at the end of the day.

Please put your HTML, CSS and JavaScript in a fiddle: http://jsfiddle.net. Once you got the code in, hit "RUN" and make sure the code executes (even if it's wrong). If it does, hit "SAVE" and copy-paste the link here.