How to fix button isn't adding a new

Question

I'm just facing a problem while clicking on "Add New Item" button, javascript won't add me a new line (<li>) in <ul>

I tried making a variable for <ul> with id="change" which is document.getElementById("change");

On the other hand, I just added an "addEventListener" to this variable, so while I click on this button, a function named "achange" will start working, and add a new line to the <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>

I'm expecting to add a line which says : "New Item 0" , but nothing happens, any help would be appreciated. Thank you

Answer 1

You're getting things at the wrong time. I would also recommend a different way of appending your items rather than append text into innerHTML.

Within your function (when you add the item) you'll want to get the reference to your ul and append children from there. This also gives you the opportunity to get the count of lis for numbering the next item (if you wish)

Also, as pointed out by others, not all browsers will support the id reference you're trying to do with ulist

Another thing to mention here is that hr is not a valid decendent of ul. If you really want the hr, you should use css or put the hr within the li (Is anything except LI's allowed in a UL?)

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>

Answer 2

4 issues with your code:

1. Your HTML was invalid as I commented on your question. I removed the hr elements.
2. Instead of working with strings and innerHTML, on simple elements it is often easier (and almost always much faster) to use document.createElement and appendChild methods.
3. Your button had no type attribute, so it was type="submit" (which is the default type).

4. You need to make sure the Javascript executes only after the DOM has been parsed, otherwise change and ulist are undefined. There is several ways to achieve that:

   • Wrap the functionality in a function that gets executed on DOMContentLoaded event (see below code).
   • Make sure the Javascript is positioned at the end of the body, right before the closing tag </body>.
   • Put your Javascript in an external file script.js and reference that in your HTML using <script src="path/to/script.js" defer></script>.

var icounter = 1;

document.addEventListener('DOMContentLoaded', () => {
  change.addEventListener("click", achange);

  function achange() {
    const li = document.createElement('li');
    li.textContent = `New Item ${icounter++}`;
    ulist.appendChild(li);
  }
})

<h1 id="header"> List that contains items. </h1>
<button id="change" type="button">Add New Item </button>
<ul type="square" id="ulist">
  <li> Pizza </li>
  <li> Burger </li>
  <li> Chicken Dinner </li>
  <li> Salad </li>
</ul>

Answer 3

You can also do this without using appendChild:

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>

Answer 4

I found a solution without appendChild and const and $ :

I just added onclick="functionName()" on the button and it worked.

<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++;
    }