This code is a progress-step so that it remains marked I am eliminating the class btn-default and inserting the class btn-primary but when I add the class because it shows me undefined? and when I use .class="btn-primary" it shows me the name of the class, and another question why showing me undefined even though it works?
var h1 = document.querySelectorAll(".stepwizard-row > .stepwizard-step >.btn");
for (h of h1) {
h.addEventListener("click", function(evt){
var h2 = document.querySelectorAll(".stepwizard-row > .stepwizard-step >.btn");
for (hh of h2) {
hh.classList.remove('btn-primary');
}
var hp = evt.target;
hp.classList.remove('btn-default');
hp.classList.add('btn-primary');
// hp.class='btn-primary';
console.log("su clase es ", hp.className);
});
}body{margin:40px;}
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<div class="stepwizard">
<div class="stepwizard-row">
<div class="stepwizard-step">
<button id="uno" type="button" class="btn btn-primary btn-circle">1</button>
<p>Registro #1</p>
</div>
<div class="stepwizard-step">
<button id="dos" type="button" class="btn btn-default btn-circle">2</button>
<p>Registro #2</p>
</div>
<div class="stepwizard-step">
<button id="tres" type="button" class="btn btn-default btn-circle">3</button>
<p>Registro #3</p>
</div>
</div>
</div>