Show element one by one on button click-CodePudding

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  style="background-color: #0b5ed7; padding: 10px; border-radius: 10px;cursor: pointer">
    <i > Add More</i>
</button>
<div  style="display: flex; margin-top: 24px">
    <input type="float"  placeholder="Cell Quantity">
    <input type="float"  placeholder="Cell Price">
</div>
<div  style="display: none" id="myDIV0">
    <input type="float"  placeholder="Cell Quantity">
    <input type="float"  placeholder="Cell Price">
</div>
<div  style="display: none" id="myDIV1">
    <input type="float"  placeholder="Cell Quantity">
    <input type="float"  placeholder="Cell Price">
</div>
<div  style="display: none" id="myDIV2">
    <input type="float"  placeholder="Cell Quantity">
    <input type="float"  placeholder="Cell Price">
</div>
<div  style="display: none" id="myDIV3">
    <input type="float"  placeholder="Cell Quantity">
    <input type="float"  placeholder="Cell Price">
</div>

CodePudding user response：

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  style="background-color: #0b5ed7; padding: 10px; border-radius: 10px;cursor: pointer">
<i > Add More</i>
</button>
<div  style="display: flex; margin-top: 24px">
  <input type="float"  placeholder="Cell Quantity">
  <input type="float"  placeholder="Cell Price">
</div>
<div  style="display: none" id="myDIV0">
  <input type="float"  placeholder="Cell Quantity">
  <input type="float"  placeholder="Cell Price">
</div>
<div  style="display: none" id="myDIV1">
  <input type="float"  placeholder="Cell Quantity">
  <input type="float"  placeholder="Cell Price">
</div>
<div  style="display: none" id="myDIV2">
  <input type="float"  placeholder="Cell Quantity">
  <input type="float"  placeholder="Cell Price">
</div>
<div  style="display: none" id="myDIV3">
  <input type="float"  placeholder="Cell Quantity">
  <input type="float"  placeholder="Cell Price">
</div>

CodePudding user response：

I have created a runnable snippet so that you can refer to it.

Did some changes to your script logic. Instead of running a for loop. You can have a currentIndex set to 0 and increment as you add a new div. Also to solve your flex issue you can wrap all your div inside a wrapper and give them display:flex and flex-direction:column so that they appear one below the other.

let currentIndex = 0;
const saveBtn = document.querySelector('.saveBtn');
saveBtn.addEventListener('click', show);
function show() {
  const divToShow = document.querySelector(`#myDIV${currentIndex}`);
  if (divToShow) {
    divToShow.style.display = 'flex';
    currentIndex  ;
  }
}

.wrapper {
  display: flex;
  flex-direction: column;
}

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

CodePudding user response：

This is NOT the recommended approach to have add more feature, however I am fixing your code.

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  onclick="show()" style="background-color: #0b5ed7; padding: 10px; border-radius: 10px;cursor: pointer">
    <i > Add More</i>
</button>

CodePudding user response：

btns = document.getElementById("saveBtn");
btns.onclick = function() {
    for (var i = 0; i <= 3; i  ) {
        var id = '#myDIV' i;
        var element = document.querySelector(id);
        var setting = element.style.display;
        if (setting == 'none') {
            element.style.display = 'flex';
        }
    }
}

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