11521 sujets

JavaScript, DOM et API Web HTML5

Mon code JavaScript avec bootstrap

Bonjour,
Je comprends pourquoi mon simple code JavaScript refuse de s'exécuter si je l'insère dans le starter template de Bootsrap ?
Mon code JavaScript :

    <script type="text/javascript">
    setTimeout("document.bgColor='black'", 1000)
    setTimeout("document.bgColor='lightpink'", 1500)
    setTimeout("document.bgColor = 'pink'", 2000)
    setTimeout("document.bgColor =  'deeppink'", 2500)
    setTimeout("document.bgColor = 'red'", 3000)
    setTimeout("document.bgColor = 'tomato'", 3500)
    setTimeout("document.bgColor = 'darkred'", 4000)
    </script>


Le lien du starter template de Bootsrap est ici : https://getbootstrap.com/docs/4.0/getting-started/introduction/#starter-template
J'ai donc inséré mon JavaScript dans mon starter template avant la fermeture de </body>. Ca doit normalement changer la couleur de fond plusieurs fois.
Sans bootstrap le code JavaScript fonctionne !! Je comprends pas !

Voilà le code complet :
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <script type="text/javascript">
    setTimeout("document.bgColor='black'", 1000)
    setTimeout("document.bgColor='lightpink'", 1500)
    setTimeout("document.bgColor = 'pink'", 2000)
    setTimeout("document.bgColor =  'deeppink'", 2500)
    setTimeout("document.bgColor = 'red'", 3000)
    setTimeout("document.bgColor = 'tomato'", 3500)
    setTimeout("document.bgColor = 'darkred'", 4000)
    </script>

  </body>
</html>


Merci !
Modifié par woubi (09 Mar 2018 - 00:10)
Merci lionel_css3 pour cette réponse !
Mais alors pourquoi le code javascript fonctionne si il est pas associé au starter template de Bootstrap ?
En effet mon code JavaScript fonctionne bien sans la fonction que tu mentionnes, juste en mettant en commentaire le CSS Bootstrap entre les balises <head></head>...
Modérateur
Simplement, Bootstrap assigne par défaut un 
background-color: white
sur <body> (qui prend le dessus sur BgColor)...

Autrement, tu peux faire une animation css sur le background-color de body, ça t'évitera de charger du JS inutile et tu centraliseras ainsi tes styles.
Merci !
Comment je peux faire donc pour que ca fonctionne avec mon javascript à moi ?
Je veux comprendre si possible.... sans passer par le CSS. Merci !
Bonjour. Moi, dans l'énoncé, ce qui m'intriguait c'était ceci :
document.bgColor

En effet, dans la logique actuelle de js l'élément n'est pas définit et ça m'a intrigué. Du coup je suis allé voir la spécification et effectivement cette syntaxe a été possible à un moment donné (cf. MDN), mais elle est obsolète aujourd'hui. Elle doit encore être supportée par un certains nombre de navigateurs, mais pour combien de temps...

Ce ne doit pas être l'origine du problème, mais il faut mieux écrire comme ceci :
document.body.style.backgroundColor

Ainsi ce sera compatible pour longtemps.
Modérateur
setTimeout("document.bgColor='black'", 1000)

devient
setTimeout("document.body.style.backgroundColor='red'", 1000)


Remplace par cette seconde ligne normalement ça fonctionnera.

Ce ne sera plus un attribut bgColor qui sera généré mais un attribut style avec le définition de background-color dedans. Si on en croit le poids de sélecteur, ça devrait fonctionner.

ça reste, je pense, une mauvaise idée... Smiley cligne
Oui, merci, je ferai attention alors. Mais donc ce n'est pas à l'origine du problème. J'ai pris cet exemple au hasard. Ce que je veux faire c'est un diaporama photo en JavaScript mais impossible de le faire fonctionner avec le starter template de Bootstrap. Comme je voulais pas mettre un code trop compliqué j'ai choisi un script plus simple avec un changement de couleur de fond !!
Mais dans un cas comme dans l'autre ca ne marche pas avec Bootsrap ! Et je sais pas comment faire ?
Modifié par woubi (09 Mar 2018 - 09:03)
Modérateur
C'est du code que tu as écrit ou c'est une librairie que tu veux utiliser ?

Pour le code, tu peux ajouter ton code dans un codepen ou jsfiddle et poster facilement un lien ici
Modifié par Yordi (09 Mar 2018 - 09:08)
Merci beaucoup !
J'ai testé donc avec 
setTimeout("document.body.style.backgroundColor='red'", 1000)
et ca fonctionne bien Smiley cligne
Mais pourquoi est ce une mauvaise idée Yordi ? Ne peut-on pas mettre de JavaScript dans un template Bootastrap ?

Enfin, ce que je souhaite comprendre c'est pourquoi mon carousel JavaScript ne fonctionne pas quand je l'associe au starter template de Bootsrap ?

Voila le code que j'ai trouvé pour le carousel : 
var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}
    slides[slideIndex-1].style.display = "block";
    setTimeout(showSlides, 2000); // Change image every 2 seconds
}


Ce carousel fonctionne bien tant que je ne le mets pas avec Bootsrap ???
Voilà mon code avec le starter template de Bootstrap : 
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>

  </head>
  <body>
    <h1>Hello, world!</h1>

    <div class="slideshow-container">

    <div class="mySlides fade">
      <div class="numbertext">1 / 3</div>
      <img src="images/slide1.jpg" style="width:100%">
      <div class="text">Caption Text</div>
    </div>

    <div class="mySlides fade">
      <div class="numbertext">2 / 3</div>
      <img src="images/slide2.jpg" style="width:100%">
      <div class="text">Caption Two</div>
    </div>

    <div class="mySlides fade">
      <div class="numbertext">3 / 3</div>
      <img src="images/slide3.jpg" style="width:100%">
      <div class="text">Caption Three</div>
    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    </div>
    <br>

    <div style="text-align:center">
      <span class="dot" onclick="currentSlide(1)"></span>
      <span class="dot" onclick="currentSlide(2)"></span>
      <span class="dot" onclick="currentSlide(3)"></span>
    </div>

    <script>
    var slideIndex = 0;
    showSlides();

    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) {slideIndex = 1}
        slides[slideIndex-1].style.display = "block";
        setTimeout(showSlides, 2000); // Change image every 2 seconds
    }
    </script>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>



  </body>
</html>


Il suffit de commenter la ligne Bootstrap du CSS dans le <head> pour que le carousel fonctionne. Sinon il semble fonctionner mais n'affiche pas les images Smiley decu
Une solution ?
Modérateur
Ok, en fait tu devrais inspecter (avec l'inspecteur d'élément - F12) pour voir que ton élément a une class .fade qui est partagée par Bootstrap. Change simplement cette class et ça devrait rentrer dans l'ordre.

Si jamais, bootstrap a un carousel pour ne pas devoir charger plus de code (il faut simplement respecter sa syntaxe et ses class).

Je trouvais ça une mauvaise idée avec les background-color car pour moi c'est du style simple (même avec une animation) et ça ne sert à rien d'utiliser du Javascript pour faire du css. Autant utiliser les bonnes choses au bon endroit, ça évitera pas mal de problème pour la suite Smiley smile
Meilleure solution
Sujet clos
Aller à