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

Résolu

melvine225 Messages postés 13 Date d'inscription Statut Membre Dernière intervention -
melvine225 Messages postés 13 Date d'inscription Statut Membre Dernière intervention - 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);

A voir également:

Nous limitons certaines activités pour protéger votre communauté
Proteger cellule excel - Guide
Instagram nous limitons certaines activités pour protéger notre communauté - Forum Instagram
Protéger un dossier par mot de passe - Guide
Instagram votre compte ne respecte pas les règles de la communauté - Guide
Nous limitons le nombre de fois que vous pouvez publier - Forum Facebook

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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";
}

melvine225 Messages postés 13 Date d'inscription Statut Membre Dernière intervention 1 > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

merci jordan j'ai compris grace a toi

Discussions similaires

Nous limitons la fréquence d’action…

Instagram : que signifie le message "réessayer plus tard" ?

action limité sur instagram

aidez moi ,Nous restreignons la fréquence de certaines activités instagram

Actions Bloquées instagram

Votre réponse

Discussions similaires