/  Technology   /  Show element one by one on button click
Show element one by one on button click

Show element one by one on button click

The javascript addEventListener() method of the EventTarget interface sets up a javascript function that will be called whenever the specified event is delivered to the target.

Syntax:

addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);

HTML:

<button class="saveBtn" style="background-color: black; padding: 10px; border-radius: 10px;cursor: pointer;color:white;width:100px">
<i class="fa fa-plus">Add</i>
</button>
<div class="col-sm-6" style="display: flex; margin-top: 24px">
<input type="float" class="form-control form-control-user" placeholder="Enter value">
</div>&nbsp;
<div class="col-sm-6" style="display: none" id="myDIV0">
<input type="float" class="form-control form-control-user" placeholder="Enter value">
</div>&nbsp;
<div class="col-sm-6" style="display: none" id="myDIV1">
<input type="float" class="form-control form-control-user" placeholder="Enter value">
</div>&nbsp;
<div class="col-sm-6" style="display: none" id="myDIV2">
<input type="float" class="form-control form-control-user" placeholder="Enter value ">
</div>&nbsp;
<div class="col-sm-6" style="display: none" id="myDIV3">
<input type="float" class="form-control form-control-user" placeholder="Enter value">
</div>

JS:

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;
}
}
})

OUTPUT :

Show element one by one on button click

 

Leave a comment