Fügen Sie einen Listeneintrag über Javascript hinzu

Also, ich versuche, ein Array auszudrucken, das Benutzereingabetext hinzugefügt bekommt, aber was ich ausdrucken möchte, ist eine geordnete Liste des Arrays. Wie Sie sehen können (wenn Sie meinen Code ausführen), erhält das Listenelement nur die hinzugefügte Benutzereingabe, und es werden keine neuen Listenelemente mit den Namen von Personen hinzugefügt. Bitte helfen Sie! Hier ist der Code unter:Fügen Sie einen Listeneintrag über Javascript hinzu

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

Quelle

2013-07-21 user2581598

'' enthält nur Meta-Informationen und Links zu Ressourcen, nicht unbedingt den Inhalt. Der Grund, warum Sie keinen neuen Listeneintrag erhalten, besteht darin, dass Sie keinen erstellen. –

Wenn Sie ein li Element für jeden Eingang/name erstellen möchten, dann müssen Sie es schaffen, mit document.createElement^[MDN].

die Liste die ID Geben Sie:

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

und einen Verweis darauf bekommen:

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

In Ihrem Event-Handler, erstellen Sie ein neues Listenelement mit dem Eingangswert als Inhalt und hängen an die folgende Liste mit Node.appendChild^[MDN]:

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

DEMO

Quelle

2013-07-21 15:46:02

versuchen, etwas wie folgt aus:

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

Fiddle: http://jsfiddle.net/FlameTrap/3jDZd/

Quelle

2013-07-21 15:46:14

ich vor kurzem mit der gleichen Herausforderung vorgestellt wurde und auf diesen Thread gestolpert fand aber eine einfachere Lösung mit Anfügen ...

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

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

Speichern Sie den ersten Wert und verwenden Sie dann append, um diesen Wert als li zu ol hinzuzufügen. Ich hoffe, das hilft :)

Quelle

2016-10-06 19:02:48

Ich tat es nicht. Ist das ein Problem? Das ist meine erste Antwort auf SO. Ziemlich neu dazu. Ich versuche nur zu helfen. Danke für deinen Beitrag. –

@JesseNovotny Ich schätze Ihre Antwort. Es hat mir geholfen. – FewFlyBy

Die obige Antwort war hilfreich für mich, aber es könnte nützlich sein (oder Best Practice), den Namen auf submit hinzuzufügen, als ich damit endete. Hoffentlich wird das für jemanden hilfreich sein. CodePen Sample

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

Quelle

2018-01-14 18:31:05 inkpixelspaper

Fügen Sie einen Listeneintrag über Javascript hinzu

Antwort

Verwandte Themen