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>