CODEWITHSUNDEEP
javascript
PA_Commons
PA_Commons

Reputation: 269

adding line breaks to array values javascript

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.

Upvotes: 3

Views: 41937

Answers (4)

tomysshadow
tomysshadow

Reputation: 932

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.

Upvotes: 0

WearFox
WearFox

Reputation: 293

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;     
 }

Upvotes: 3

Hawk
Hawk

Reputation: 783

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>

Upvotes: 1

BrettL
BrettL

Reputation: 144

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/

Upvotes: 1

Related Questions