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 Suresh Raina
Suresh Raina
Courses Plus Student 205 Points

why i m not getting linebrake in browser...?

hey i m working on quiz application every thing is going right but i m not able to identify why the linebreak is not happening after every label .... should i need to create more than one br tag dynamically here is my code :- 

var questions = [
{
    question: "What is 2*5?",
    choices: [2, 5, 10, 15],
    correctAnswer: 2
  }, 
  {
    question: "What is 3*6?",
    choices: [6, 9, 12, 18],
    correctAnswer: 4
  },
   {
    question: "What is 8*9?",
    choices: [72, 99, 108, 134],
    correctAnswer: 0
  }, 
  {
    question: "What is 1*7?",
    choices: [4, 5, 6, 7],
    correctAnswer: 3
  }, 
  {
    question: "What is 8*8?",
    choices: [30, 40, 50, 64],
    correctAnswer: 4
  }

];
var quiz= document.getElementById("quiz");
var counter = questions.length;
var score = 0;
  for (var i = 0; i < counter; i++) {
       var ques = document.createElement("h1");
       var opt_1 = document.createElement("input");
       var option_a = document.createElement("label");
       var linebreak = document.createElement("br");
       var opt_2 = document.createElement("input");
       var option_b = document.createElement("label");
       var opt_3 = document.createElement("input");
       var option_c = document.createElement("label");
       var opt_4 = document.createElement("input");
       var option_d = document.createElement("label");




       opt_1.type = "radio";
       opt_1.name = "ans";
       opt_2.type = "radio";
       opt_2.name = "ans";
       opt_3.type = "radio";
       opt_3.name = "ans";
       opt_4.type = "radio";
       opt_4.name = "ans";

       ques.innerText = questions[i].question;
       option_a.innerText = questions[i].choices[0];
       option_b.innerText = questions[i].choices[1];
       option_c.innerText = questions[i].choices[2];
       option_d.innerText = questions[i].choices[3];


       quiz.appendChild(ques);
       quiz.appendChild(opt_1);
       quiz.appendChild(option_a);
       quiz.appendChild(linebreak);
       quiz.appendChild(opt_2)
       quiz.appendChild(option_b);
       quiz.appendChild(linebreak);
       quiz.appendChild(opt_3)
       quiz.appendChild(option_c);
       quiz.appendChild(linebreak);
       quiz.appendChild(opt_4)
       quiz.appendChild(option_d);
       quiz.appendChild(linebreak);
}

1 Answer

Sharnie Ivery
Sharnie Ivery
1,015 Points
Sharnie Ivery
Sharnie Ivery
1,015 Points

Here's an example of how you would implement a line break using JavaScript:

var br = document.createElement( 'br' );
var inline1 = document.createElement( 'span' );
var inline2 = document.createElement( 'span' );
inline1.innerHTML = 'Hello World';
inline2.innerHTML = 'Hello World';

// before line break
document.body.appendChild( inline1 );
document.body.appendChild( inline2 );
//= Hello WorldHello World

// after line break
document.body.appendChild( inline1 );
document.body.appendChild( br ); // line break
document.body.appendChild( inline2 );
//= Hello World
//= Hello World

P.S. You're missing a few semicolons towards the bottom.