Changing CSS classes from JavaScript

Navigation
0

I put you in situation, I have a div with an image of a dog, when you click on it, its sound is played and the div becomes smaller and bigger with the small class that contains that animation.

The problem is that at the end of that animation the image of its initial position is unbalanced, so I am trying to remove the small class and leave it as it was by default. I searched the internet and found this form but it does not work, any solution? Thanks in advance. 

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);

}
    
asked by Code Lite 20.01.2018 в 18:11
source

2 answers

-1

I recommend you use JQuery, It is a tool that most programmers use in javascript and it is very easy to import, Here I tell you how to import JQuery and how to change classes to the div.

1) Add this piece of code to the end of your file, Before the body finishes:

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

2) Your code must be after you add jquery, that is, after what you just added, and to change the class do the following:

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

3) To delete the class do the following:

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

4) Your code should look like this:

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

I hope it works for you.

    
answered by 20.01.2018 / 18:56
source
1

See this example with pure JavaScript.

There is an example using classList . It is an easy way to do it. This form is compatible with more than 90% of current browsers, according to caniuse.com .

► Using 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>

► Compatibility mode

This would be a way to do it, compatible with older browsers. 

/*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>

I hope it serves you.

    
answered by 20.01.2018 в 20:28
How to disable a button or a href if localstorage is empty in ionic Error "DataTable warning: table id = tableID - Ajax error"