Sujet Précédent Sujet Suivant

Svp besoin d'aide en java script merci la communauté

Résolu/Fermé
melvine225 Messages postés 13 Date d'inscription samedi 5 novembre 2022 Statut Membre Dernière intervention 1 janvier 2023 - Modifié le 29 déc. 2022 à 00:36
melvine225 Messages postés 13 Date d'inscription samedi 5 novembre 2022 Statut Membre Dernière intervention 1 janvier 2023 - 29 déc. 2022 à 11:54

Je souhaite créer une fonction « affiche » qui prend en paramètre n le numéro d'une image à afficher (j'ai 8 images)

je voudrais que quand j'appelle la fonction dans la console, elle affiche l'image passé en parametre(avec des conditions)

exemple: si n egale 1 j'affiche l'image 1 uniquement.

 Au chargement de la page on appelle la fonction affiche avec le paramètre 1 par defaut pour afficher la première image,

voila ce que j'ai fait mais ça ne marche pas(mon script js est ci dessous)

MERCI POUR TOUT

-------mon fichier html-------

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title> Diaporama  </title>
    <!-- Lien vers le Javascript -->
    <script src="diaporama.js" charset="utf-8" defer="defer"></script>
           
</head>
<body>
<!-- Chargement des images du diaporama -->
 <div id="diapo">
  <img id='img1' src='images_diaporama/img1.jpg'>
  <img id='img2' src='images_diaporama/img2.jpg'>
  <img id='img3' src='images_diaporama/img3.jpg'>
  <img id='img4' src='images_diaporama/img4.jpg'>
  <img id='img5' src='images_diaporama/img5.jpg'>
  <img id='img6' src='images_diaporama/img6.jpg'>
  <img id='img7' src='images_diaporama/img7.jpg'>
  <img id='img8' src='images_diaporama/img8.jpg'>
</div>
<!-- Pagination pour faire défiler les images -->
<div id="pagination">
    <span><</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>></span>

</div>
</body>
</html>

 ------Mon fichier java script-----

function affiche(n) {
    if(n = 1){
        document.getElementById("img").style.display = "block";
        document.getElementById("img2").style.display = "none";
        document.getElementById("img3").style.display = "none";
        document.getElementById("img4").style.display = "none";
        document.getElementById("img5").style.display = "none";
        document.getElementById("img6").style.display = "none";
        document.getElementById("img7").style.display = "none";
        document.getElementById("img8").style.display = "none";
       
      } if (n = 2) {
      
        document.getElementById("img1").style.display = "none";
        document.getElementById("img2").style.display = "block";
        document.getElementById("img3").style.display = "none";
        document.getElementById("img4").style.display = "none";
        document.getElementById("img5").style.display = "none";
        document.getElementById("img6").style.display = "none";
        document.getElementById("img7").style.display = "none";
        document.getElementById("img8").style.display = "none";
      } if(n = 3) {
        document.getElementById("img1").style.display = "none";
        document.getElementById("img2").style.display = "none";
        document.getElementById("img3").style.display = "block";
        document.getElementById("img4").style.display = "none";
        document.getElementById("img5").style.display = "none";
        document.getElementById("img6").style.display = "none";
        document.getElementById("img7").style.display = "none";
        document.getElementById("img8").style.display = "none";
      } if (n = 4) {
        document.getElementById("img1").style.display = "none";
        document.getElementById("img2").style.display = "none";
        document.getElementById("img3").style.display = "none";
        document.getElementById("img4").style.display = "block";
        document.getElementById("img5").style.display = "none";
        document.getElementById("img6").style.display = "none";
        document.getElementById("img7").style.display = "none";
        document.getElementById("img8").style.display = "none";
    }  if (n = 5) {
        document.getElementById("img1").style.display = "none";
        document.getElementById("img2").style.display = "none";
        document.getElementById("img3").style.display = "none";
        document.getElementById("img4").style.display = "none";
        document.getElementById("img5").style.display = "block";
        document.getElementById("img6").style.display = "none";
        document.getElementById("img7").style.display = "none";
        document.getElementById("img8").style.display = "none";
    }  if (n = 6) {
        document.getElementById("img1").style.display = "none";
        document.getElementById("img2").style.display = "none";
        document.getElementById("img3").style.display = "none";
        document.getElementById("img4").style.display = "none";
        document.getElementById("img5").style.display = "none";
        document.getElementById("img6").style.display = "block";
        document.getElementById("img7").style.display = "none";
        document.getElementById("img8").style.display = "none";
    }  if (n = 7) {
        document.getElementById("img1").style.display = "none";
        document.getElementById("img2").style.display = "none";
        document.getElementById("img3").style.display = "none";
        document.getElementById("img4").style.display = "none";
        document.getElementById("img5").style.display = "none";
        document.getElementById("img6").style.display = "none";
        document.getElementById("img7").style.display = "block";
        document.getElementById("img8").style.display = "none";
        
    }  if (n = 8) {
        document.getElementById("img1").style.display = "none";
        document.getElementById("img2").style.display = "none";
        document.getElementById("img3").style.display = "none";
        document.getElementById("img4").style.display = "none";
        document.getElementById("img5").style.display = "none";
        document.getElementById("img6").style.display = "none";
        document.getElementById("img7").style.display = "none";
        document.getElementById("img8").style.display = "block";
        
        
    }   
}      
affiche(1);

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38380 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 janvier 2025 4 727
Modifié le 29 déc. 2022 à 01:13

Bonjour,

Script que tu peux réduire à :

//diaporama.js
function affiche(n) {
  var imgs = document.querySelectorAll("img");
  imgs.forEach(function(el) {
    el.style.display = "none";
  });
  document.getElementById("img"+n).style.display = "block";
}    

  
affiche(1);

A noter, pour tes prochains exos .. que la comparaison se fait avec deux égales :  ==

Un seul égale signifie que tu assignes une valeur

==  ou  === permet de faire une comparaison
1
jordane45 Messages postés 38380 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 janvier 2025 4 727
29 déc. 2022 à 01:15

Et si tu ne veux pas afficher / masquer .. tu peux  mettre UNE SEUL  balise IMG

Et demander à ta fonction de changer le chemin de l'image à charger

function affiche(n) {
  document.getElementById("img").src = "images_diaporama/img"+n+".jpg";
}
0
melvine225 Messages postés 13 Date d'inscription samedi 5 novembre 2022 Statut Membre Dernière intervention 1 janvier 2023 1 > jordane45 Messages postés 38380 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 janvier 2025
29 déc. 2022 à 11:54

merci jordan j'ai compris grace a toi 

0

Discussions similaires

Nous limitons la fréquence d’action…
Mimi -
Duieoekend -

7 réponses
Instagram : que signifie le message "réessayer plus tard" ?
Rionmrv -
Popi -

3 réponses
action limité sur instagram
BAp -
Caro -

3 réponses
"Nous limitons certaines activités pour protéger votre communauté."
sofboubou1 -
sofboubou1 -

4 réponses
aidez moi ,Nous restreignons la fréquence de certaines activités instagram
Jade -
jade -

4 réponses