Show element one by one on button click

July 26, 2022

I have 5 div elements I want to show elements one by one on the click function but it does not work, you can also give another solution to do this.

another thing I want display property none to flex in my div element

btns = document.getElementsByClassName("saveBtn");
btns.onclick = function show() {
    for (var i = 0; i <= 4; i++) {
        var id = '#myDIV' + i;
        var element = document.getElementById(id);
        var setting = element.style.display;

        if (setting == 'none') {
            element.style.display = 'flex';
            break;
        }
    }
}

<button class="saveBtn" style="background-color: #0b5ed7; padding: 10px; border-radius: 10px;cursor: pointer">
    <i class="fa fa-plus"> Add More</i>
</button>
<div class="col-sm-6" style="display: flex; margin-top: 24px">
    <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
    <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV0">
    <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
    <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV1">
    <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
    <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV2">
    <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
    <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV3">
    <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
    <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>

>Solution :

the problem is with this line btns.onclick = function show() which is btns[0].onclick = function show(){ and you can continue with your code but it is better to use addEventListener.
you need to also remove # from making of id.

btns = document.getElementsByClassName("saveBtn");
btns[0].addEventListener('click', function() {
  for (var i = 0; i <= 4; i++) {
    var id = 'myDIV' + i;
    var element = document.getElementById(id);
    var setting = (element) ? element.style.display : '';

    if (setting == 'none') {
      element.style.display = 'flex';
      break;
    }
  }
})

<button class="saveBtn" style="background-color: #0b5ed7; padding: 10px; border-radius: 10px;cursor: pointer">
<i class="fa fa-plus"> Add More</i>
</button>
<div class="col-sm-6" style="display: flex; margin-top: 24px">
  <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
  <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV0">
  <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
  <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV1">
  <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
  <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV2">
  <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
  <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV3">
  <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
  <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>