How to add a line break after every 10th element inside of an array?

Question

I am new to js & looking to complete the following instructions:

"Using a for statement, write a web page that outputs all the odd numbers,

separated by spaces, less than a number n, where n is input from the user. You

should only print 10 numbers per line. Make sure your program deals with

inappropriate input."

So far, I've managed to create the output of all the odd numbers that are less than the user inputted values, but I can't figure out how to add a line break after every 10 numbers. Any suggestions?

Here's my code:

var i;
var oddNumbers= [];


function oddNumberFunc (n) {

for (i = 0; i < n; i++) {
   //if increment is divided by 2 and there is not a remainder of 0
    if (i%2 !== 0 ){
        //add increment to the array. 
        oddNumbers.push (i);
        // if the newly incremented array's element length is greater than 10 
    } if (oddNumbers%10 ==0){
        //console log the length
        console.log(oddNumbers.length)
        //append a line break after every 10th element
        oddNumbers.splice(10,0, "<br>");

    }else {
    document.getElementById ("myResults").innerHTML = oddNumbers;
    }
 }
}

oddNumberFunc(100);

}

Answer 1 · 2014-11-03T02:26:53Z

November 3, 2014 2:26am

Hi James,

I see. So this make sense because as an error because you're assigning a method to equal to an array.

document.getElementByTagName('span') = oddNumber;

So, your logic is good with for loops and the conditions statement.

Let'a go through after the first if statement.

If the conditions are true, it will be pushing the number iteration into an array and it will basically store it in there. Once the first iteration is done it will store the new number in the array and go to the 2nd if statement. If it evaluate as false it will go the 2nd if statement.

Alright, so I think your post description tells you to print numbers with spaces right? In this case, it is not doing that. What is happening it is storing the iteration in your array.

If you want it to the print the number iteration, instead of storing it in array. This is part where I think it should print or display 'i' on the page via the createElement and appending it into a span tag for each element. Or use console.

// Create a blank element
var el = document.createElement('span');

// Append and write the element on the body of the page.
document.body.appendChild(el);

// Appends and add the iteration values onto the page.
el.appendChild(document.createTextNode(i + " ");

Alternatively you can also write() to print the iteration on the page.

document.write(i + " ");
// or print array key of the iteration is another way.

For breaking you would do something similar either createElement / append or write().

So I am not sure if that make sense or not, this is how would I try it base on your first post description.

Hope that helps. If you try that, it doesn't work and you are banging your head against the wall than you can see my approach and comparing to what you did.

http://jsfiddle.net/animitto/y2fy6v14/

If you want to figure it out for yourself or if you feel you're close than please ignore it.

Good luck.

Answer 2 · 2014-11-02T03:42:18Z

November 2, 2014 3:42am

I think it has to do with the way the <br> element is put into the array. When you add it as .innerHTML the code is probably reading it as text rather than an element.

If you create an element, then append the rest to the new element you may have better luck.

Here is a link to what I think you need:

http://www.w3schools.com/jsref/met_document_createelement.asp

Best wishes, Lonnie

Answer 3 · 2014-11-02T08:44:00Z

November 2, 2014 8:44am

``So, here is what I think is happening. When you are using

document.getElementById ("myResults").innerHTML = oddNumbers;

In a loop the innerHTML will overwrite every iteration and replacing the previous number with a new one.

Lonnie's recommendation prevents that by creating a element and appending it for every iteration as a new element, where it won't overwrite the previous number.

Try to use something like this

var newNum = document.createElement('span');
document.body.appendChild(newNum);

This will create a new span element and append it. Likewise for break tag. These element are still empty, so add your text in there and see if that works.

If you are still having problem pasting your updated code may be helpful. Good luck!

Welcome to the Treehouse Community

Looking to learn something new?

James Carter

James Carter

How to add a line break after every 10th element inside of an array?

3 Answers

chrisp

chrisp

James Carter

James Carter

Lonnie Wibberding

Lonnie Wibberding

James Carter

James Carter

chrisp

chrisp

James Carter

James Carter