JavaScript:在单击单个按钮时显示多个 Div

Question

我需要展示一系列 <div>当用户单击按钮时，一次一个元素。他们开始使用 <div style="display:none"> 隐藏起来.共有 11 个 <div>每个标签都具有来自 id="dt-1" 的不同“id”至 id="dt-11"

这是我现在的代码:

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> ，不是全部。

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">