35

そのため、ユーザー入力テキストが追加された配列を印刷しようとしていますが、印刷したいのは配列の順序付きリストです。ご覧のとおり、(私のコードを実行すると) リスト アイテムにユーザー入力が追加され続けるだけで、新しいリスト アイテムに人の名前が追加されることはありません。

以下にコードを示します。

 <!DOCTYPE html>
 <html>
 <head>
 First name: <input type="text" id="firstname"><br> 

 <script type="text/javascript">
 var x= [];

 function changeText2(){
var firstname = document.getElementById('firstname').value;
document.getElementById('boldStuff2').innerHTML = firstname;
x.push(firstname);
document.getElementById('demo').innerHTML = x;
 }
 </script>

 <p>Your first name is: <b id='boldStuff2'></b> </p> 
 <p> Other people's names: </p>
 
 <ol>
     <li id = "demo"> </li> 
 </ol>

 <input type='button' onclick='changeText2()'   value='Submit'/> 

 </head>
 <body>
 </body>
 </html>
4

4 に答える 4

79

li入力/名前ごとに要素を作成する場合は、 document.createElement [MDN]を使用して作成する必要があります。

リストに ID を付与します。

<ol id="demo"></ol>

それへの参照を取得します。

var list = document.getElementById('demo');

イベント ハンドラーで、入力値を内容とする新しいリスト要素を作成し、Node.appendChild [MDN]でリストに追加します。

var firstname = document.getElementById('firstname').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(firstname));
list.appendChild(entry);

デモ

于 2013-07-21T15:46:02.133 に答える
5

私は最近、この同じ課題を提示され、このスレッドに出くわしましたが、追加を使用してより簡単な解決策を見つけました...

var firstname = $('#firstname').val();

$('ol').append( '<li>' + firstname + '</li>' );

firstname の値を保存し、 を使用appendしてその値を として に追加しliますol。これが役立つことを願っています:)

于 2016-10-06T19:02:48.077 に答える