admin管理员组文章数量:1330673
I am working on an assignment for school. I have everything working the way it should be. The only thing that is wrong is how the output is formatted. I am not understanding why I am receiving the output formatted the way it is. I am using javascript, and I am creating nodes and appending them as a child element. My main goal is for each piece of information to be formatted and placed on its own line. this is my javascript function.
function createUserid()
{
var firstString = window.prompt ( "Enter first name", "" );
//documentwrite
var lower = firstString.toLowerCase();
// firstString.substring(0,4)
// firstString.concat
var lastString = window.prompt ( "Enter last name", "" );
var lowlast = lastString.toLowerCase();
var socialString = window.prompt ( "Enter social security number without dashes", "" );
var ln = lowlast.substring(0,4); //first 4 of last name
var ls = socialString.substring(5,9); //last 4 of social
var fs = socialString.substring(0,5); //first 5 of social
var fn = lower.substring(0,4); //first 4 of first name
//var user = docoument.write("<p>" + "Username: " + lastString +
//var pass = <p>"Password: " +
//var myDiv = document.getElementById('here');
//myDiv.innerHTML = ____ ;
var e = document.getElementById('info');
var o = document.getElementById('here');
//creating 2 elements: p, br
var newPara = document.createElement('p');
var tBR = document.createElement('br');
//prepare text nodes
var first = document.createTextNode('First name: ' + firstString);
var last = document.createTextNode('Last name: ' + lastString);
var social = document.createTextNode('Social Security #: ' + socialString);
var userN = document.createTextNode('Username: ' + ln + ls);
var passW = document.createTextNode('Password: ' + fs + fn);
//put together paragraph
newPara.appendChild(first);
newPara.appendChild(tBR);
newPara.appendChild(last);
newPara.appendChild(tBR);
newPara.appendChild(social);
newPara.appendChild(tBR);
newPara.appendChild(userN);
newPara.appendChild(tBR);
newPara.appendChild(passW);
//insert into div id of info
document.getElementById('info').appendChild(newPara);
o.style.display = 'none';
e.style.display = 'block';
}
this is the output I am receiving
this is how the output is supposed to look.
I am working on an assignment for school. I have everything working the way it should be. The only thing that is wrong is how the output is formatted. I am not understanding why I am receiving the output formatted the way it is. I am using javascript, and I am creating nodes and appending them as a child element. My main goal is for each piece of information to be formatted and placed on its own line. this is my javascript function.
function createUserid()
{
var firstString = window.prompt ( "Enter first name", "" );
//documentwrite
var lower = firstString.toLowerCase();
// firstString.substring(0,4)
// firstString.concat
var lastString = window.prompt ( "Enter last name", "" );
var lowlast = lastString.toLowerCase();
var socialString = window.prompt ( "Enter social security number without dashes", "" );
var ln = lowlast.substring(0,4); //first 4 of last name
var ls = socialString.substring(5,9); //last 4 of social
var fs = socialString.substring(0,5); //first 5 of social
var fn = lower.substring(0,4); //first 4 of first name
//var user = docoument.write("<p>" + "Username: " + lastString +
//var pass = <p>"Password: " +
//var myDiv = document.getElementById('here');
//myDiv.innerHTML = ____ ;
var e = document.getElementById('info');
var o = document.getElementById('here');
//creating 2 elements: p, br
var newPara = document.createElement('p');
var tBR = document.createElement('br');
//prepare text nodes
var first = document.createTextNode('First name: ' + firstString);
var last = document.createTextNode('Last name: ' + lastString);
var social = document.createTextNode('Social Security #: ' + socialString);
var userN = document.createTextNode('Username: ' + ln + ls);
var passW = document.createTextNode('Password: ' + fs + fn);
//put together paragraph
newPara.appendChild(first);
newPara.appendChild(tBR);
newPara.appendChild(last);
newPara.appendChild(tBR);
newPara.appendChild(social);
newPara.appendChild(tBR);
newPara.appendChild(userN);
newPara.appendChild(tBR);
newPara.appendChild(passW);
//insert into div id of info
document.getElementById('info').appendChild(newPara);
o.style.display = 'none';
e.style.display = 'block';
}
this is the output I am receiving
this is how the output is supposed to look.
Share Improve this question asked Apr 12, 2013 at 8:18 bob Glennbob Glenn 1031 gold badge5 silver badges13 bronze badges3 Answers
Reset to default 8You are appending same node again and again.
newPara.appendChild(first);
newPara.appendChild(tBR);
newPara.appendChild(last);
newPara.appendChild(tBR); <--- this node gets moved, since you append it again.
newPara.appendChild(social);
newPara.appendChild(tBR);
newPara.appendChild(userN);
newPara.appendChild(tBR); <--- this is where tBR will be at last.
newPara.appendChild(passW);
Instead do this :
var first = document.createTextNode('First name: ' + firstString + '<br/>');
Or this :
newPara.appendChild(first);
newPara.appendChild(document.createElement('br'));
newPara.appendChild(last);
newPara.appendChild(document.createElement('br'));
.................................
Documentation here : https://developer.mozilla/en-US/docs/DOM/Node.appendChild
Adds a node to the end of the list of children of a specified parent node. If the node already exists it is removed from current parent node, then added to new parent node.
If child
has already been inserted, element.appendChild(child)
removes it from where it was before inserting it at its new location.
Use node.cloneNode(true)
to make copies of the child, or just use document.createElement('br')
again and again (possibly in a loop to avoid repeating yourself).
Try this:
var first = document.createTextNode('First name: ' + firstString + '<br>');
var last = document.createTextNode('Last name: ' + lastString + '<br>');
var social = document.createTextNode('Social Security #: ' + socialString + '<br>');
var userN = document.createTextNode('Username: ' + ln + ls + '<br>');
var passW = document.createTextNode('Password: ' + fs + fn + '<br>');
本文标签: htmladding a line break using javascriptStack Overflow
版权声明:本文标题:html - adding a line break using javascript - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742260369a2442399.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论