adding line breaks to array values javascript

Question

Here is my javascript array:

var quizArray = [
'When the weather is agreeable what do you prefer to do the most?~Something outside...Obviously!~I tend to enjoy things that aren\'t dependent on weather.~Read, possibly outside if I can find my sunscreen.~Do what I always do, which is whatever I want.~Try something new, like Planking.~~~','It\'s a weeknight and friend invites you to an orchestra. You would?~Kindly refuse. It\'s just not my thing.~Go, unquestionably. I love all art forms.~Ask who the composer is, then read all about them before going.~Confuse Orchestra with Opera and begin singing in Latin.~Go if the tickets are free, otherwise no.~~~',]

When I load my html it won't display line breaks after each answer. I've tried adding a .join(<\br>) after split, but that breaks up every single word, here is the code I have:

function displayQuiz(ent, qnum) {

perPage++;
var qna = quizArray[qnum].split('~');
var od = []; for (var i = 1; qna[i] != null && qna[i] != ''; i++) od.push(i); od.sort( randOrd ); od.sort( randOrd ); 
var newF = document.createElement("form"); 
var newDq = document.createElement("div"); 
newDq.className = 'question'; 
newDq.appendChild(document.createTextNode(Number(qnum+1)+ ': ' +qna[0])); 
newF.appendChild(newDq); 
newDq = document.createElement("div"); 
newDq.className = 'answers'; 
for (var i = 1; qna[i] != null && qna[i] != ''; i++) {var newDa = document.createElement("label"); newDa.htmlFor = 'a'+qnum+i; /*@cc_on @if (@_jscript) var newR = document.createElement("<input name='a"+qnum+"'>"); @else */ 
var newR = document.createElement("input"); 
newR.name = 'a'+qnum; /* @end @*/ 
newR.type = 'radio'; 
newR.id = 'a'+qnum+i; 
newR.value = od[i-1]; 
newDa.appendChild(newR); 
newDa.appendChild(document.createTextNode(' '+qna[od[i-1]]+' ')); 
newDq.appendChild(newDa);} 
newF.appendChild(newDq); 
document.getElementById('quiz'+perPage).appendChild(newF);
}

I'll try my best to post additional info if needed. I did use this as a snippet and am very novice on Javascript. Not opposed to learning on my own but I've poured over the interwebs and cannot find my answer.

you have an array with a single string. You should be just assigning a string and then splitting the string into an array. What doesn't make sense is why you'd use ~ characters instead of linebreaks (\n). — zzzzBov
– zzzzBov, Commented May 2, 2014 at 21:49
<wbr> is a hint to the text layout engine that a line can be broken. — Mike Samuel
– Mike Samuel, Commented May 2, 2014 at 23:00

WearFox · Accepted Answer · 2014-05-02 22:49:22Z

3

to make an array of Strings its better if you put your complete string in a var and after make a split(), and for add
you can use a join() or a for()

It's better put this way the code

var quizArray = 'When the weather is agreeable what do you prefer to do the most?~Something outside...Obviously!~I tend to enjoy things that aren\'t dependent on weather.~Read, possibly outside if I can find my sunscreen.~Do what I always do, which is whatever I want.~Try something new, like Planking.~~~';

        function displayQuiz(ent, qnum) {

            perPage++;
            var qna = quizArray.split('~');
            var res = qna.join(" <br> ");
            return res;     
 }

edited May 2, 2014 at 22:49

answered May 2, 2014 at 22:26

WearFox

2933 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RobG Over a year ago

You should explain your answer, not just post code, and provide an example of use. It can be done in one line: quizArray.split('~').join('<br>').

PA_Commons Over a year ago

If I do that I get every letter spaced out with a radio button next to it. I posted the rest of my code so maybe someone can help me answer. Thanks

BrettL · Accepted Answer · 2014-05-02 22:35:39Z

1

Here is the approach that I took, using .join to add the br element. I think you weren't specifying what to split on originally, if it added br after every word.

var string = 'When the weather is agreeable what do you prefer to do the most?~Something 
outside...Obviously!~I tend to enjoy things that aren\'t dependent on weather.~Read, possibly outside if I can find my sunscreen.~Do what I always do, which is whatever I want.~Try something new, like Planking.~~~';

var quizArray = string.split('~');
var finalString = quizArray.join('<br/>');

document.getElementById('yourIdHere').innerHTML = finalString;

Here's a fiddle: http://jsfiddle.net/brettwlutz/Q35J2/1/

edited May 2, 2014 at 22:35

answered May 2, 2014 at 22:27

BrettL

1444 bronze badges

Comments

Hawk · Accepted Answer · 2014-05-02 22:40:38Z

1

i thought arrays were made as so:

var arr = [val1, val2, val3];

you can use arr.push to append more values or arr.unshift to add values to the beginning of the array

http://jsfiddle.net/h_awk/K3kEv/

<script>
var arr = [1, 2, 3, 4], i;

for( i=0; i<arr.length; i++ )
{
document.write(arr[i] + '<br />');
}
</script>

edited May 2, 2014 at 22:40

answered May 2, 2014 at 21:49

Hawk

7811 gold badge7 silver badges19 bronze badges

2 Comments

Kyle Falconer Over a year ago

This will not automatically add line breaks between array elements unless you do arr.join('\n')

RobG Over a year ago

"this will automatically have line breaks after every comma" no, it does not. Arrays are just Objects with a special length property and handy methods, the literal syntax and default string representation use commas to separate the values. And since it is extremely unlikely the OP is using XHTML, the answer should use HTML syntax: arr.join('<br>');

tomysshadow · Accepted Answer · 2014-05-02 23:13:20Z

0

First, to answer your question. The above code should work and make the variable qna contain the new, split array. Your solution of adding .join("
") should then turn that new array into a single string with html newlines. That is, unless you want t JS newline, in which case you should instead use .join("\n").

My question for you is, why are you starting with an array with only one element? A string can be split into an array and joined back into a string the same way. Also, it may be easier to, instead of using the tilde ~ to seperate the statements you want to split, just use a form of proper array syntax, then get rid of the "split" and just use the joining:

var quizArray = ["When the weather is agreeable what do you prefer to do the most?", "Something outside...Obviously!, I tend to enjoy things that aren\'t dependent on weather.", "Read, possibly outside if I can find my sunscreen.", "Do what I always do, which is whatever I want.", "Try something new, like Planking."];

My only possible understanding is that you are still learning JS and this is just an example for learning how to split arrays, but this is not really a real-life application, which is why this post seems questionable to Stack Overflow users.

answered May 2, 2014 at 23:13

tomysshadow

9801 gold badge10 silver badges25 bronze badges

1 Comment

PA_Commons Over a year ago

Alright, I understand what you are getting at. However there are more than 20 questions within that array. I just cut them all out to make it easier.

Collectives™ on Stack Overflow

adding line breaks to array values javascript

4 Answers 4

2 Comments

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related