JavaScript：在单个按钮上显示多个Div。单击

Question

我需要在用户点击按钮时一次显示一系列<div>个元素。他们开始使用<div style="display:none">隐藏。共有11个<div>代码，每个代码都有id="dt-1"到id="dt-11"不同的“ID”

这是我现在的代码：

function adddt() {
    var count;
    for(count=1;count<6;count++)
    {
        document.getElementById('dt-'+count+'').style.display = 'block';
    }
};

<div id='dt-1'>
<label>Destination 1</label>
<input type="text">
<input type="number">
</div>

<div id='dt-2' style="display:none;">
<label>Destination 2</label>
<input type="text">
<input type="number">
</div>

<div id='dt-3' style="display:none;">
<label>Destination 3</label>
<input type="text">
<input type="number">
</div>

<div id='dt-4' style="display:none;">
<label>Destination 4</label>
<input type="text">
<input type="number">
</div>

<div id='dt-5' style="display:none;">
<label>Destination 5</label>
<input type="text">
<input type="number">
</div>

<input type="button" onclick="adddt()" value="add more destinations">

如您所见，当您单击按钮时，它会显示所有<div>个， 不是一次一个。每次点击只应添加一个<div>，而不是全部。{/ p>

1. 首先点击 - 显示<div id='dt-2'>
2. 第二次点击 - 显示<div id='dt-3'>
3. ......等等。

Answer 1

你可以尝试这个，使用一个存储当前id的变量，每次增加1：

var count = 2;
var countMax = 5;

function adddt() {
  if(count > countMax)
    return;
  document.getElementById('dt-' + count + '').style.display = 'block';
  count++;
}

<div id='dt-1'>
  <label>Destination 1</label>
  <input type="text">
  <input type="number">
</div>

<div id='dt-2' style="display:none;">
  <label>Destination 2</label>
  <input type="text">
  <input type="number">
</div>

<div id='dt-3' style="display:none;">
  <label>Destination 3</label>
  <input type="text">
  <input type="number">
</div>

<div id='dt-4' style="display:none;">
  <label>Destination 4</label>
  <input type="text">
  <input type="number">
</div>

<div id='dt-5' style="display:none;">
  <label>Destination 5</label>
  <input type="text">
  <input type="number">
</div>

<input type="button" onclick="adddt()" value="add more destinations">