Question

我有一个显示“添加顶部”的按钮，当按下它时，必须出现一个包含某些值标签的新选择标签。我差不多做了，但是当我按下按钮时，标签出现并立即消失。怎么了？

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>

Answer 1

如@brk所述，

删除document.addEventListener('DOMContentLoaded', () => {/* ... */} 将解决您的问题。 您无需修改任何HTML代码。

但是我建议使用document.getElementById作为   document.querySelector()较为通用，可能会因为   与document.getElementById
相比
检查性能差异here

我对您的代码做了一些更改，因为它附加了3个以上的下拉菜单，随时可以对其进行更改

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>

Answer 2

按钮的默认类型为submit，将其更改为button type='button'。

如果在dom准备就绪后加载了脚本，那么您可能不需要document.addEventListener('DOMContentLoaded',

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>

使用JS添加select> option作为列表项

2 个答案: