0

Este codigo es un progress-step para que se quede marcado voy eliminando la clase btn-default e insertando la clase btn-primary pero cuando agrego la clase porque me muestra undefined? y cuando usao .class="btn-primary" me muestra el nombre de la clase, y otra duda por que mostrandome undefined aun asi funciona?

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>

7
  • Es un error tipográfico. Las clases CSS las puedes ver en los atributos className o classList no en class (es una palabra reservada paa creación de "clases").
    – gugadev
    el 6 mar. 2017 a las 20:30
  • @Guz mi codigo usa classList y me muestra undefined
    – hubman
    el 6 mar. 2017 a las 20:31
  • Te muestra undefined aquí: console.log("su clase es ", hp.class); por la razón que ya te mencioné: no existe un atributo .class en HTMLElement.
    – gugadev
    el 6 mar. 2017 a las 20:32
  • @Guz cierto gracias, otra cosa por que no muestra este codigo igual a bootsnipp.com/user/snippets/0B9ld si de ahi lo copie(pero no el js)
    – hubman
    el 6 mar. 2017 a las 20:35
  • No puedo ver ese snippet, no tengo cuenta en bootsnipp ;) Si es una duda referente a programación, puedes hacer una nueva pregunta.
    – gugadev
    el 6 mar. 2017 a las 20:37

1 respuesta 1

0

No existe el atributo .class en HTMLElement.

La palabra reservada class se usa para creación de "clases" en JavaScript; no hay atributo con ese nombre en ningún elemento. Por otro lado, el atributo classlist es un DOMTokenList y como es obvio tiene los métodos de ésta interface, como son:

  • add
  • remove
  • toggle
  • replace

Y varios métodos más que puedes consultar en la documentación.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.