2

私は学校の課題に取り組んでいます。すべてが正常に機能しています。唯一間違っているのは、出力のフォーマット方法です。出力をそのままの形式で受け取る理由がわかりません。私はjavascriptを使用しており、ノードを作成して子要素として追加しています。私の主な目標は、各情報をフォーマットして、独自の行に配置することです。これは私のJavaScript関数です。

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

    }

これは私が受け取っている出力ですここに画像の説明を入力

これは、出力がどのように見えるかです。ここに画像の説明を入力

4

3 に答える 3

8

同じノードを何度も追加しています。

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

代わりにこれを行います：

 var first = document.createTextNode('First name: ' + firstString + '<br/>');

またはこれ：

        newPara.appendChild(first);
        newPara.appendChild(document.createElement('br'));
        newPara.appendChild(last);
        newPara.appendChild(document.createElement('br'));  
 .................................

ドキュメントはこちら: https://developer.mozilla.org/en-US/docs/DOM/Node.appendChild

指定された親ノードの子のリストの最後にノードを追加します。ノードが既に存在する場合は、現在の親ノードから削除され、新しい親ノードに追加されます。

于 2013-04-12T08:21:16.303 に答える
0

これを試して：

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>');
于 2013-04-12T08:24:15.537 に答える