Adding select>option as list items using JS

Question

I have a button that says 'Add topping' and when it's pressed, there has to be appeared a new select tag that contains certain value tags. I almost did it but when I press the button, the tag appears and immediately disappears. What's wrong?

HTML:

      <div class="form-group" id='add_one'>
        <br>
        <h5>You can add up to 3 toppings to your pizza!</h5>
        <ol id="list"></ol>
        <button class="btn btn-primary" id="add">Add topping</button>
      </div>

JS:

var toppings = ['Zucchini', 'Fresh Garlic', 'Black Olives', 'Anchovies',
  'Barbecue Chicken', 'Artichoke', 'Spinach', 'Ham', 'Sausage', 'Mushrooms'];

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#add').onclick = () => {

    const topping = document.createElement('select', {
      'name': 'Topping',
      'class': 'form-control'
    });
    list.appendChild(topping);
    toppings.forEach(function(item, i, arr) {
      const ch_topping = document.createElement('option');
      ch_topping.innerHTML += item;
      topping.appendChild(ch_topping);
    });
  };
});

var toppings = ['Zucchini', 'Fresh Garlic', 'Black Olives', 'Anchovies',
  'Barbecue Chicken', 'Artichoke', 'Spinach', 'Ham', 'Sausage', 'Mushrooms'];

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#add').onclick = () => {

    const topping = document.createElement('select', {
      'name': 'Topping',
      'class': 'form-control'
    });
    list.appendChild(topping);
    toppings.forEach(function(item, i, arr) {
      const ch_topping = document.createElement('option');
      ch_topping.innerHTML += item;
      topping.appendChild(ch_topping);
    });
  };
});

<div class="form-group" id='add_one'>
        <br>
        <h5>You can add up to 3 toppings to your pizza!</h5>
        <ol id="list"></ol>
        <button class="btn btn-primary" id="add">Add topping</button>
      </div>

Madhan Varadhodiyil · Accepted Answer · 2018-08-30 14:58:43Z

1

As @brk mentioned,

Removing document.addEventListener('DOMContentLoaded', () => {/* ... */} would solve your problem. And you don't need to modify any HTML code.

But I'd suggest to use document.getElementById as document.querySelector() is more generic and may perform worse as compared to document.getElementById

Check the performance diff b/w them here

And I have made some changes to you code as it is appending more than 3 dropdowns, feel free to change it

var toppings = ['Zucchini', 'Fresh Garlic', 'Black Olives', 'Anchovies',
  'Barbecue Chicken', 'Artichoke', 'Spinach', 'Ham', 'Sausage', 'Mushrooms'
];
var appended = 0;
var maxAppended = 3;

document.getElementById('add').onclick = () => {
  appended+=1;
  if(appended <= maxAppended){
  const topping = document.createElement('select', {
    'name': 'Topping',
    'class': 'form-control'
  });
  list.appendChild(topping);
  toppings.forEach(function(item, i, arr) {
    const ch_topping = document.createElement('option');
    ch_topping.innerHTML += item;
    topping.appendChild(ch_topping);
  });
  }
  else {
  /* Your logic goes here*/
  }
};

<div class="form-group" id='add_one'>
  <h5>You can add up to 3 toppings to your pizza!</h5>
  <ol id="list">
  </ol>
  <button class="btn btn-primary" id="add">Add topping</button>
</div>

edited Aug 30, 2018 at 14:58

Madhan Varadhodiyil

2,1061 gold badge16 silver badges21 bronze badges

answered Aug 30, 2018 at 14:30

Sarath Damaraju

3714 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Desiigner Over a year ago

it returns TypeError: document.getElementById(...) is null.

Sarath Damaraju Over a year ago

It seems working in the above snippet. Can you your code?

brk · Accepted Answer · 2018-08-30 14:14:22Z

0

button default type is submit change it to button type='button'.

Also you may not need document.addEventListener('DOMContentLoaded', if the scripts are loaded after dom is ready

var toppings = ['Zucchini', 'Fresh Garlic', 'Black Olives', 'Anchovies',
  'Barbecue Chicken', 'Artichoke', 'Spinach', 'Ham', 'Sausage', 'Mushrooms'
];


document.querySelector('#add').onclick = () => {

  const topping = document.createElement('select', {
    'name': 'Topping',
    'class': 'form-control'
  });
  list.appendChild(topping);
  toppings.forEach(function(item, i, arr) {
    const ch_topping = document.createElement('option');
    ch_topping.innerHTML += item;
    topping.appendChild(ch_topping);
  });
};

<div class="form-group" id='add_one'>
  <br>
  <h5>You can add up to 3 toppings to your pizza!</h5>
  <ol id="list"></ol>
  <button type="button" class="btn btn-primary" id="add">Add topping</button>
</div>

answered Aug 30, 2018 at 14:14

brk

50.3k10 gold badges59 silver badges85 bronze badges

1 Comment

Desiigner Over a year ago

did that but now I'm having trouble with this TypeError: document.getElementById(...) is null

Collectives™ on Stack Overflow

Adding select>option as list items using JS

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related