Line break issue in javascript - javascript

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?

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

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

Related

converting html code to java script string format

I am having html code for hyperlink as below:
<td> {{ book.code }}</td>
<td>{{book.name}}</td>
it is directing to the correct page.
In Script from the response I update the page as below It is not giving error (of course link page is empty because of 1 as parameter):
html += "<tr> <td> <a href= '{% url 'select_stock_report' 1 %}'>"+item1.code+"</a></td>"+
"<td>" + item1.name + "</td>" + "<td>" + item1.open_qty + " </td>"
But I want to replace 1 (one) with item1.id.
html += "<tr><td><a href='{% url 'select_stock_report' item1.id %}'>"+item1.code+"</a></td>"+
"<td>" + item1.name + "</td>" + "<td>" + item1.open_qty + " </td>"
But I am getting error.
How to build the line with this replacement. I tried all "",'',+ with this item.id without success.
Thanks for your help.
String content="<h1>Heading 1</h1>\n" +
" <h2>Heading 2</h2>\n" +
" <p>This is some html. Look, here\\'s an <u>underline</u>.</p>\n" +
" <p>Look, this is <em>emphasized.</em> And here\\'s some <b>bold</b>.</p>\n" +
" <p>Here are UL list items:\n" +
" <ul>\n" +
" <li>One</li>\n" +
" <li>Two</li>\n" +
" <li>Three</li>\n" +
" </ul>\n" +
" <p>Here are OL list items:\n" +
" <ol>\n" +
" <li>One</li>\n" +
" <li>Two</li>\n" +
" <li>Three</li>\n" +
" </ol>";
Its use html inside of java

NewLine does not appear in the browser validation message

I have a input as below with a pattern
$('#charEntry').append("<input type='text' class='form-control' id='chars"+i+"' pattern='(?=.*\\\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[-+*/%])(?=.*[.?,:;-~]).*' " +
"title='Your String Must Contain:
" +
"One Upper Case Value
" +
" One Lower-Case Value
" +
" One Arithmetic Value
" +
" One Punctuation Character
" +
" One Numeric Value'" +
" maxlength='" +charLength + "'" +
" minlength='" +charLength + "' required>");
However in the actual message the new lines would not get printed as below.
I have tried , \n and &#010 but nothing works.
is there a fix for this?

Javascript a new line in a string

I have a string like so:
var customerInfo = data[0].Customer_Name + " " + data[0].Customer_LName + "\r\n" + data[0].Phone + "\r\n" + data[0].Email;
and I am trying to add new lines with \r\n but its not working, everything is on the same line. Please Help.
To print the javascript variable in an HTML page, you should use the <br /> tag to create a new line, instead \r\n.
var customerInfo = data[0].Customer_Name + " " + data[0].Customer_LName + "<br />" + data[0].Phone + "<br />" + data[0].Email;

Posting from multiple dynamically created HTML textarea elements

Given the following snippet:
out.println("<form action=" + "./post" + " " + "method=" + "post" + " " + "id=" + "tweetForm" + ">");
for (int i = 1; i <= twParser.currentTweetIndex; i++) {
output = twParser.tweetArray[i] + newLine;
out.println("<p>");
out.println("<textarea" + " " + "name=text" + " " + "id=\"styled\"" + " " + "maxlength=140" + " " + "cols=" + "140" + " " + "rows=" + "1" + " " + "tag=" + "text_" + String.valueOf(i) + " " + "form=" + "tweetForm" + " " + "onfocus=\"setbg('#e5fff3');\" onblur=\"setbg('white')\"" + ">" + output + "</textarea>");
out.println("<span class=label-style-countdown" + " " + "id=" + "chars" + String.valueOf(i) + ">" + String.valueOf(140 - twParser.tweetArray[i].length()) + "</span> characters remaining");
out.println("<p>");
}
out.println("<input type=" + "submit" + " " + "name=" + "post" + " " + "value=" + "post" + " " + "style=\"float: left;\"" + "/>");
out.println("<button type=\"reset\" value=\"Reset\">Reset</button>"
...that creates HTML multiple textarea elements and posts them to a servlet. But since all the textareas have the same name, only the contents of the first textarea are posted.
Is there a way to post them all?
Thanks
To have multiple inputs from same name you can use name array like
<textarea name="text[]">You text here</textarea>
which will post all the values having same name as an array.
PS: This can be done with any input types expect radio buttons
On this line:
out.println("<textarea" + " " + "name=text" + " " ...
Append i to the name of the textarea, such that the names increase as text1, text2 etc.
out.println("<textarea" + " " + "name=text" + i.toString() + " " ...
Perform the same loop on the server when receiving the POST request to receive from each textarea.

Possible to add a loop while appending to the DOM?

I'm appending some information to the DOM, but realized that some of the information I need is nested within an object. When I do the below bit of code, the part within the loop returns as undefined. Is there a way to iterate over and pull out this information so that I can append it to my page:
function placeOnPage(allStopsWithRoutes){
allStopsWithRoutes.forEach(function(stop){
$('#stops').append("Stop: " + stop.crossStreets + "<br>" +
// LOOP HERE
stop.routes.forEach(function(route){
"Bus Name: " + busName + "<br>" +
"Stops Away: " + stopsAway + "<br>" +
"Destination: " + destination + "<p>"
});
// END LOOP
);
});
}
I don't think strings can be concatenated that way. Change your approach to concatenate before hand and store it in a variable. Then append the variable
function placeOnPage(allStopsWithRoutes) {
allStopsWithRoutes.forEach(function(stop) {
var concatenatedStr = '';
stop.routes.forEach(function(route) {
concatenatedStr += ("Bus Name: " + busName + "<br>" +
"Stops Away: " + stopsAway + "<br>" +
"Destination: " + destination + "<p>");
});
$('#stops').append("Stop: " + stop.crossStreets + "<br>" + concatenatedStr);
});
}

Categories