0

Os pongo en situación, tengo un div con una imagen de un perro, al hacer click sobre él, se reproduce su sonido y el div se hace mas pequeño y más grande con la clase pequenio que contiene esa animacion.

El problema es que al acabar esa animación se descuadra la imagen de su posicion inicial, por lo que estoy intentando quitar la clase pequenio y dejarla como estaba por defecto. He buscado en internet y he encontrado esta forma pero no funciona, ¿alguna solución? Gracias de antemano.

function playPerro(){

    document.getElementById("audiocerdo").pause();
    document.getElementById("audiovaca").pause();
    document.getElementById("audiogato").pause();

    document.getElementById("audioperro").play();
    document.getElementById("perro").className="animal pequenio";

    var claseAnimacion = document.getElementsByClassName("animal pequenio");

    function myPause() {
        document.getElementById("audioperro").pause();
        claseAnimacion.classList.remove("pequenio");
    }
    setInterval(myPause, 5000);

} 
6
  • Bienvenido a Stackoverflow. Por favor, edita tu pregunta poniendo también el código CSS de las clases que intervienen en este caso, para que puedas obtener una respuesta adecuada. Gracias.
    – A. Cedano
    el 20 ene. 2018 a las 17:32
  • En este caso creo que no es irrevelante poner los códigos de css, ya que lo unico que quiero es que el div con la clase "animal pequenio", después de la animación sólo tenga la clase "animal", es decir, dejarlo por defecto. @A.Cedano
    – Code Lite
    el 20 ene. 2018 a las 17:46
  • getElementsByClass te regresa un arreglo de nodos, si el elemento al que quieres acceder es el que tiene como id = perro, accede a el así para quitarle la clase document.getElementById('perro').classList.remove('pequenio');
    – Yikarus
    el 20 ene. 2018 a las 17:51
  • Si ese div tiene un id, lo más fácil sería hacer esto: var divPerro = document.getElementById('idDeTuDiv'); divPerro.classList.remove('pequenio'); El problema aquí sería que classList no es soportado por todas las versiones de navegadores. Ver aquí para la compatibilidad.
    – A. Cedano
    el 20 ene. 2018 a las 17:58
  • 1
    Posible duplicado de ¿Cómo aplicar una clase desde JavaScript o jQuery? el 21 ene. 2018 a las 14:30

2 respuestas 2

1

Mira este ejemplo con JavaScript puro.

Hay un ejemplo usando classList. Es una forma fácil de hacerlo. Esta forma es compatible con más del 90% de los navegadores actuales, según caniuse.com.

► Usando classList

/*Navegadores modernos*/

var btnRemover = document.getElementById('btnRemoverPeq');
btnRemover.onclick = function() {
  var clase = 'pequenio';
  var divPerro = document.getElementById('perro');
  if (divPerro.classList.contains(clase)) {
    divPerro.classList.toggle(clase);
  }
};
.animal {
  width: 25%;
  padding: 25px;
  background-color: red;
  color: white;
  font-size: 25px;
}

.pequenio {
  width: 15%;
  padding: 15px;
  background-color: black;
  color: white;
  font-size: 15px;
}
<div id="perro" class="animal pequenio">
  <p>El Perro</p>
</div>
<button id="btnRemoverPeq">Que no sea pequeño</button>


► Modo compatibilidad

Esta sería una forma de hacerlo, compatible con los navegadores antiguos.

/*Modo compatibilidad*/

btnRemoverComp = document.getElementById('btnRemoverPeqComp');
btnRemoverComp.onclick = function() {
  var clase = 'pequenio';
  var divPerro = document.getElementById('perro_comp');
  var siPequeno = (" " + divPerro.className + " ").indexOf(" " + clase + " ") > -1;

  if (siPequeno) {
    divPerro.classList.toggle(clase);
    divPerro.className.replace(new RegExp('(?:^|s)' + clase + '(?!S)'), '');

  }
};
    .animal {
      width: 25%;
      padding: 25px;
      background-color: red;
      color: white;
      font-size: 25px;
    }

    .pequenio {
      width: 15%;
      padding: 15px;
      background-color: black;
      color: white;
      font-size: 15px;
    }
<div id="perro_comp" class="animal pequenio">
  <p>El Perro</p>
</div>
<button id="btnRemoverPeqComp">Que no sea pequeño (compatibilidad)</button>

Espero te sirva.

3
  • Me sigue sin funcionar. Mi script lo que hace es ejecutar una animacion, por lo tanto no tengo botones ni nada por el estilo. Si hago click en el perro, este reproduce su sonido y hace la animación correspondiente. Al cabo de 5 seg el sonido para, pero por tema de la clase pequenio o la que corresponda ,la imagen se descuadra y yo lo que quiero es volver al div a su estado "natural", quitándole todo lo aplicado al ahcer click sobre él.
    – Code Lite
    el 21 ene. 2018 a las 11:31
  • @CodeLite yo puse lo de los botones para poder hacer las pruebas. Eso no significa que el evento tenga que depender necesariamente de un botón. En ambas propuestas de código lo que se hace es preguntar si esa clase está presente en el elemento, y si lo está entonces le quita ese clase. Si aplicas esa lógica correctamente funcionará como lo hace aquí. El problema es que a veces eso depende de la forma en que tengas organizado tu CSS y las demás parte del código. Suponte que le quitas la clase pero en otra parte se la pones sin darte cuenta... Por eso es importante que revises la lógica...
    – A. Cedano
    el 21 ene. 2018 a las 12:19
  • muchas gracias por tu aportación! Debe de ser cosa de las clases de css, no del funcionamiento de js en sí
    – Code Lite
    el 21 ene. 2018 a las 17:07
-1

Te recomiendo que uses JQuery, Es una herramienta que usan la mayoria de los programadores en javascript y es muy facil de importar, Aqui te digo como importar JQuery y como cambiar de clase al div.

1) Agrega este pedazo de codigo al final de tu archivo, Antes de que acabe el body:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

2) Tu codigo tiene que estar despues de que agregas jquery, Es decir, despues de lo que acabaste de agregar, Y para cambiar la clase haces lo siguiente:

$(".clase-del-div o #id-del-div").addClass("Nombre de la clase");

3) Para borrar la clase haces lo siguiente:

$(".clase-del-div o #id-del-div").removeClass("Nombre de la clase");

4) Tu codigo deberia quedar asi:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"</script> <script type="text/javascript"> $('.test').addClass('Hi'); </script>

Espero que te sirva.

2
  • No puedo utilizar jQuery pero aún así me lo apunto! Muchas gracias!
    – Code Lite
    el 21 ene. 2018 a las 11:26
  • Dale, Está bien.
    – Alejov
    el 21 ene. 2018 a las 22:45

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.