it-swarm.dev

إضافة عنصر القائمة من خلال جافا سكريبت

لذا ، أحاول طباعة صفيف يضيف إليه نص إدخال المستخدم ، لكن ما أريد طباعته هو قائمة مرتبة بالصفيف. كما ترى ، (إذا قمت بتشغيل الكود الخاص بي) ، فإن عنصر القائمة يستمر في إضافة مدخلات المستخدم إليه ، ولا تتم إضافة أي عناصر قائمة جديدة بأسماء الأشخاص. الرجاء المساعدة! هنا هو الرمز أدناه:

 <!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>
19
user2581598

إذا كنت ترغب في إنشاء عنصر li لكل إدخال/اسم ، فعليك إنشائه باستخدام document.createElement[MDN] .

إعطاء القائمة المعرف:

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

DEMO

54
Felix Kling

تم تقديم هذا التحدي لي مؤخرًا وتعثرت في هذا الموضوع ولكنني وجدت حلاً أبسط باستخدام الإلحاق ...

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

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

قم بتخزين قيمة الاسم ثم استخدم append لإضافة تلك القيمة كـ li إلى ol. آمل أن يساعد هذا :)

4
Jesse Novotny

جرب شيئا مثل هذا:

var node=document.createElement("LI");
var textnode=document.createTextNode(firstname);
node.appendChild(textnode);
document.getElementById("demo").appendChild(node);

كمان: http://jsfiddle.net/FlameTrap/3jDZd/

4
Flame Trap

كانت الإجابة أعلاه مفيدة بالنسبة لي ، ولكن قد يكون من المفيد (أو أفضل ممارسة) إضافة الاسم عند الإرسال ، كما انتهيت. نأمل أن يكون هذا مفيدًا لشخص ما. نموذج CodePen

    <form id="formAddName">
      <fieldset>
        <legend>Add Name </legend>
            <label for="firstName">First Name</label>
            <input type="text" id="firstName" name="firstName" />

        <button>Add</button>
      </fieldset>
    </form>

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

<script>
    var list = document.getElementById('demo');
    var entry = document.getElementById('formAddName');
    entry.onsubmit = function(evt) {
    evt.preventDefault();
    var firstName = document.getElementById('firstName').value;
    var entry = document.createElement('li');
    entry.appendChild(document.createTextNode(firstName));
    list.appendChild(entry);
  }
</script>
1
inkpixelspaper