Beim Klicken auf die Schaltfläche "Neues Element hinzufügen" tritt nur ein Problem auf. Javascript fügt mir keine neue Zeile (<li>) in <ul> hinzu.

Ich habe versucht, eine Variable für <ul> mit id = "change" zu erstellen. Dies ist document.getElementById ("change");

Andererseits habe ich dieser Variablen gerade einen "addEventListener" hinzugefügt. Während ich auf diese Schaltfläche klicke, funktioniert eine Funktion mit dem Namen "achange" und fügt hinzu eine neue Zeile zum <ul>

var icounter = 1;
var c = document.getElementById("change");
c.addEventListener("click", achange);

function achange() {
  ulist.innerHTML += "<li> New Item " + icounter + "</li>";
}
<h1 id="header"> List that contains items. </h1>
<button id="change">Add New Item </button>
<ul type="square" id="ulist">
  <li> Pizza </li>
  <hr align="left" width="20%">
  <li> Burger </li>
  <hr align="left" width="20%">
  <li> Chicken Dinner </li>
  <hr align="left" width="20%">
  <li> Salad </li>
  <hr align="left" width="20%">
</ul>

Ich erwarte, eine Zeile hinzuzufügen, die besagt: "Neues Element 0" , aber nichts passiert, jede Hilfe wäre dankbar. Danke dir

0
Raphael Eid 18 Jän. 2019 im 01:42

3 Antworten

Beste Antwort

Sie können dies auch ohne Verwendung von appendChild tun:

var iCounter = 1;

var c = document.getElementById("change");
c.addEventListener("click", achange);

function achange() {

  var ulist = document.getElementById('ulist');
  
  ulist.innerHTML += '<li> New Item ' + (iCounter++) + ' </li><hr align="left" width="20%">';
  
}
<h1 id="header"> List that contains items. </h1>
<button id="change">Add New Item </button>
<ul type="square" id="ulist">
  <li> Pizza </li>
  <hr align="left" width="20%">
  <li> Burger </li>
  <hr align="left" width="20%">
  <li> Chicken Dinner </li>
  <hr align="left" width="20%">
  <li> Salad </li>
  <hr align="left" width="20%">
</ul>
0
Monarth Sarvaiya 18 Jän. 2019 im 04:33

Ich habe eine Lösung ohne appendChild und const und $ gefunden:

Ich habe gerade onclick="functionName()" auf dem button hinzugefügt und es hat funktioniert.

<h1 id="header"> List that contains items. </h1>
<button id="change" onclick="achange()">Add New Item </button>
<ul type="square" id="ulist">
<li> Pizza </li> <hr>
<li> Burger </li> <hr>
<li> Chicken Dinner </li> <hr>
<li> Salad </li> <hr>
</ul>
var icounter = 1;
    function achange(){
    document.getElementById("ulist").innerHTML += "<li> New Item " +icounter +"</li> <hr>";
    icounter++;
    }
0
Raphael Eid 18 Jän. 2019 im 10:42

Sie bekommen Dinge zur falschen Zeit. Ich würde auch eine andere Art des Anhängens Ihrer Elemente empfehlen, als Text an innerHTML anzuhängen.

Innerhalb Ihrer Funktion (wenn Sie das Element hinzufügen) möchten Sie den Verweis auf Ihr ul erhalten und von dort aus Kinder anhängen. Dies gibt Ihnen auch die Möglichkeit, die Anzahl der li s für die Nummerierung des nächsten Elements zu ermitteln (falls Sie dies wünschen).

Wie von anderen erwähnt, unterstützen nicht alle Browser die ID-Referenz, die Sie mit ulist erstellen möchten.

Eine andere Sache, die hier erwähnt werden muss, ist, dass hr kein gültiger Nachkomme von ul ist. Wenn Sie das hr wirklich wollen, sollten Sie CSS verwenden oder die Stunde in das li einfügen (Ist in einem UL etwas anderes als LI erlaubt?)

const addNewItem = () => {
  const list = document.getElementById('ulist');
  const liCount = list.querySelectorAll('li').length;
  const hr = document.createElement('hr');
  hr.setAttribute('align', 'left');
  hr.setAttribute('width', '20%');
  const newLi = document.createElement('li');
  newLi.innerText = `Item # ${liCount + 1}`;
  newLi.append(hr);
  list.appendChild(newLi);
};

document.getElementById('change').addEventListener('click', addNewItem);
<h1 id="header"> List that contains items. </h1>
<button id="change">Add New Item </button>
<ul type="square" id="ulist">
<li> Pizza </li> <hr align="left" width="20%">
<li> Burger </li> <hr align="left" width="20%"> 
<li> Chicken Dinner </li> <hr align="left" width="20%">
<li> Salad </li> <hr align="left" width="20%">
</ul>
2
mwilson 17 Jän. 2019 im 23:17