es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Toogle clase activa utilizando getElementById.

18 Jul, 2023 Programación

Estoy intentando cambiar la clase de “none” a “active” usando “document.getElementById”, pero solo agrega “active” y no la elimina.

Archivo page.html

function toggleIt() {
  let collapseModel = document.getElementById('collap_id').className += "content active";
  collapseModel[0].classList.toggle("active");
}


.content {
  padding: 10px 20px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

.content.active {
  padding: 10px 20px;
  display: block;
  overflow: hidden;
  background-color: #f1f1f1;
}


<button onclick="toggleIt();">Abrir</button>

<div class="content" id="collap_id">
  Aquí estarán todos los detalles
</div>

Cuando hago clic en “toggle it”, se abre pero no se cierra, también muestra “Uncaught TypeError: Cannot read properties of undefined (reading ‘toggle’)”.

He intentado muchas veces pero no cambia.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema parece estar en la forma en que se utiliza la propiedad className para agregar la clase active. Cuando se utiliza .className +=, se concatena toda la cadena de clases, incluyendo las clases existentes y la nueva clase, lo que resulta en múltiples apariciones de la clase active.

    Para alternar correctamente la clase, podemos usar la propiedad .classList y sus métodos .add() y .remove(). Aquí hay una función toggleIt() actualizada que debería funcionar:

    function toggleIt() {
  let collapseModel = document.getElementById(`collap_id`);
  collapseModel.classList.toggle("active");
}

    Al llamar a classList.toggle() con el nombre de la clase como argumento, la función verifica si el elemento ya tiene la clase. Si la tiene, la elimina, y si no la tiene, la agrega.

    Además, la línea collapseModel[0].classList.toggle("active") es innecesaria ya que collapseModel ya es una referencia al elemento que queremos alternar.

    Con respecto al mensaje de error, parece que collapseModel se está tratando como un array en lugar de como un elemento. Esto probablemente se deba a [0] en collapseModel[0]. Dado que getElementById() devuelve un solo elemento, no necesitamos usar un accesor de array.

    Eliminar [0] debería solucionar el error:

    collapseModel.classList.toggle("active");

Comments are closed.