I am trying to display a series of items on a button click.
I have a single button and I want to show them as I press. I want to show the ref2 div on the first click and the ref3 on the second click.
What I did was a for loop but it shows me all of them at the same time when I click on it, I don't know why this is happening. Can someone tell me why the for loop doesn't work like I'm trying to do?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.oculto{
display:none;
}
</style>
<title>document</title>
</head>
<body>
<div class="container">
<h3>Referencias</h3><br>
<div id="ref1" class=""> <!-- Inicio Referencia -->
<div class="col_one_third c-azul">
<label for="nombreRef1">Nombre<small></small></label>
<input type="text" id="nombreRef1" name="nombreRef1" value="" class="sm-form-control ">
</div>
</div> <!--Final Referencia1 -->
<div id="ref2" class="oculto"> <!-- Inicio Referencia2 -->
<div class="col_one_third c-azul">
<label for="nombreRef2">Nombre 2<small></small></label>
<input type="text" id="nombreRef2" name="nombreRef2" value="" class="sm-form-control ">
</div>
</div> <!--Final Referencia2 -->
<div id="ref3" class="oculto"> <!-- Inicio Referencia3 -->
<div class="col_one_third c-azul">
<label for="nombreRef3">Nombre 3<small></small></label>
<input type="text" id="nombreRef3" name="nombreRef3" value="" class="sm-form-control ">
</div>
</div> <!--Final Referencia3 -->
<br>
<input type="button" class="btn agregarbtn" value="Agregar Referencia">
<br>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="validaciones.js">
</script>
</body>
</html>
My JavaScript code "validations.js" is this:
<script>
$(document).ready(function(){
$(".agregarbtn").click(function(){
let element1= document.getElementById("ref2");
let element2= document.getElementById("ref3");
for(var contador=1;contador<=3;contador++){
if(contador<=2){
element1.classList.remove("oculto");
} else if(contador<=3){
element2.classList.remove("oculto");
}
contador++;
}
});
});
</script>
Perhaps only small changes should be made in validations.js: