Adding a new form input on the fly using appendChild, function not triggered, page reloads

Question

I am working off this example below (which works great) in order to add new items/fields within my form, on the fly depending on a drop down selection. Currently when the correct drop down is selected the correct div shows with the first input, however when I click add, rather than adding an additional row (as works in my test code) with a new input, the page just reloads and the form is blank. I thought perhaps a conflict with another element on the page but haven't been able to find any culprit.

working example:

<div>
        <label for="item">Enter a new item:</label>
        <input type="text" name="item" id="item">
        <button onclick="addItem()">Add item</button>
    </div>
    <ul>
    </ul>
    <script>
          var list = document.querySelector('ul');
      var input = document.querySelector('input');
      var button = document.querySelector('button');
      button.onclick = function() {
        var myItem = input.value;
        input.value = '';
        var listItem = document.createElement('li');
        var listText = document.createElement('span');
        var listBtn = document.createElement('button');
        listItem.appendChild(listText);
        listText.textContent = myItem;
        listItem.appendChild(listBtn);
        listBtn.textContent = 'Delete';
        list.appendChild(listItem);
        listBtn.onclick = function(e) {
          list.removeChild(listItem);
        }
        input.focus();
      }
    </script>

In my test above it works as it should but when I implement it in my form using the below the page reloads instead of adding a row.

html/pug

    div#addMultipleDays.form-group.col-md-2
      label(for='item') Enter a new
      input.form-control(type='text' name='item' id='item')
      button#addNew Add
    ul#items  
      div.text-danger #{booking.addMultipleDaysError}

my js

$(document).ready(function() {
  const list = document.querySelector('ul#items');
  const input = document.querySelector('input#item');
  const button = document.querySelector('button#addNew');
  button.onclick = function() {
    const myItem = input.value;
    input.value = '';
    const listItem = document.createElement('li');
    const listText = document.createElement('span');
    const listBtn = document.createElement('button');
    listItem.appendChild(listText);
    listText.textContent = myItem;
    listItem.appendChild(listBtn);
    listBtn.textContent = 'Delete';
    list.appendChild(listItem);
    listBtn.onclick = function(e) {
      list.removeChild(listItem);
    };
    input.focus();
  };
});

I have tried to add a listener (and plan to again once working) instead but this above is merely to get it working and test.

I can see the new item gets created but the page reloads when triggering the button.onclick but I don't understand why. Why does the page reload? Am I missing anything obvious?

Answer 1

I think you might be missing the id of some of your elements.

I have copy-pasted your code and after adding the id="addNew" to the button and id="items", then removing onclick="addItem()" from the button, it works.

$(document).ready(function() {
  const list = document.querySelector('ul#items');
  const input = document.querySelector('input#item');
  const button = document.querySelector('button#addNew');
  button.onclick = function() {
    const myItem = input.value;
    input.value = '';
    const listItem = document.createElement('li');
    const listText = document.createElement('span');
    const listBtn = document.createElement('button');
    listItem.appendChild(listText);
    listText.textContent = myItem;
    listItem.appendChild(listBtn);
    listBtn.textContent = 'Delete';
    list.appendChild(listItem);
    listBtn.onclick = function(e) {
      list.removeChild(listItem);
    };
    input.focus();
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
        <label for="item">Enter a new item:</label>
        <input type="text" name="item" id="item">
        <button id="addNew">Add item</button>
    </div>
    <ul id="items">
    </ul>

It is also worinkg when using pug, just the indentation needs fixing and there are some undefined properties. See here: https://codepen.io/gheja/pen/Exaevbm

Answer 2

The problem was with me forgetting to set the button type, I found an answer in this post:

Set the type on your buttons:

...that'll keep them from triggering a submit action when an exception occurs in the event handler. Then, fix your removeItem() function so that it doesn't trigger an exception:

Set Type on buttons