0

if I use a paragraph element the line doesn't break, but if I use a textarea element the line breaks. why is this?

html:

<div id="requirement_7"> <h3> Requirement #7</h3> <p>Press "Show Array" button to see an array created with JSON.<br> It will show A state, the capital and quailty rating.</p> <button type="button" id="array_button" onclick="JSONArray()">Show Array</button> <p id="array_text"></p> </div> 

javascript:

function JSONArray(){ var text = '{"stateCapital":['+ '{"stateName":"Texas", "stateCapital":"Austin", "qualityRating":"10"},'+ '{"stateName":"Virginia", "stateCapital":"Richmond", "qualityRating":"7"},'+ '{"stateName":"California", "stateCapital":"Sacremento", "qualityRating":"7"},'+ '{"stateName":"Coloroado", "stateCapital":"Denver", "qualityRating":"10"} ]}'; var obj = JSON.parse(text); document.getElementById("array_text").innerHTML = obj.stateCapital[0].stateName + " " + obj.stateCapital[0].stateCapital + " " + obj.stateCapital[0].qualityRating + "\n" + obj.stateCapital[1].stateName + " " + obj.stateCapital[1].stateCapital + " " + obj.stateCapital[1].qualityRating + "\n" + obj.stateCapital[2].stateName + " " + obj.stateCapital[2].stateCapital + " " + obj.stateCapital[2].qualityRating + "\n" + obj.stateCapital[3].stateName + " " + obj.stateCapital[3].stateCapital + " " + obj.stateCapital[3].qualityRating; } 

I have "\n" in my script to create the line break. I'm confused why it works in one element and not the other?

1
  • 3
    In HTML, \n doesn't mean "newline". You probably wanted <br> instead. Commented Sep 11, 2015 at 3:26

2 Answers 2

3

you need to replace "\n" with "<br>" since you are using .innerhtml it recognizes it as HTML and not JavaScript.

Codepen http://codepen.io/noobskie/pen/ojjeKZ?editors=101

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

Comments

0

You must use <br> to make a line break in paragraph.

If you do not want to change from '\n' to <br> you can use <pre> tag instead of <p> tag.

refer doc:
http://www.w3schools.com/html/html_paragraphs.asp
http://www.w3schools.com/tags/tag_pre.asp

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.