Conflit entre deux fichier JS

Résolu

RobinPaitry -
RobinPaitry - 19 avril 2019 à 11:23

Bonjour, je suis actuellement entrain de développer un portfolio web, j'utilise pour le réaliser du HTML, du PHP, du CSS et du JS.
J'ai actuellement un problème que je n'arrive pas à régler dans la partie JS de mon programme.
J'utilise sur toute les page de mon portfolio un dossier main.js qui sert à ouvrir mon menu de navigation, ce fichier js marche sur toute mes pages sauf une.
Sur la page en question j'ai inséré un bouton de "retour en haut de page" avec un scroll ( comme présent en bas à droite sur ce site ).
Depuis que j'ai intégré un fichier JS à ce bouton mon menu de navigation ne fonctionne plus.

Je m'adresse donc à vous en espérant que vous puissiez m'aider.

Mon fichier de base :

<!DOCTYPE html>
<html lang="fr">

<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="description de la page">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- External CSS -->
    <link rel="stylesheet" href="css/styleapropos.css">
    <link rel="stylesheet" href="css/styleA.css">
    <link rel="stylesheet" href="css/scroll.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

    <!-- Custom CSS -->
    <style>


    </style>
    <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/code-new-roman" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

</head>

<body>

    <!-- CONTENT START -->
    <a href="#home" class="scrollToTop" id="myBtn"><i class="fas fa-arrow-up"></i></a>


    <?php
   include ('navbar.php')
   ?>




<!-- partie presentation -->
    <div class="container-fluid" id="home">
        <div class="row">
            <div class="col-12">
                <h2 class="soustitre">À PROPOS </h2>
            </div>
        </div>
    </div>


    <div class="container mt-5 mb-5">
        <div class="row">
            <div class="col-sm-9">
                <p class="p3">Bonjour !
             Et bienvenue dans mon univers.
                    Je suis spécialisé dans le développement web, le Design Graphique et l'illustration.
                   Créatif depuis mon plus jeune âge, je suis passionné de dessin, de graphisme et de
                    typographie.
                    Titulaire du Permis B, je suis mobile.
                     Découvrez ici mes compétences et mon parcours professionnel et retrouvez sur ce site mes
                    réalisations graphiques, dépliants, affiches, packaging mais aussi mes travaux web et mes
                    illustrations... </p>

                    </div>


                    <div class="col-sm-3">
                    <img src="img/moi-bloc3.png" class="mt-4 img-fluid">
                    </div>


</div>
</div>



<!-- partie experiences -->
<div class="container mt-5 mb-5">
<div class="row">


<div class="col-sm-1">
<i class="fas fa-briefcase fa-2x"></i>
</div>

<div class="col-sm-11">
<h3 class="h3A">Expériences professionnelles</h3>
</div>

</div>

<div class="row">


<div class="col-12">
<p class="p2">
              
<b>2018 - 2019</b> - Professeur particulier de dessin et de bande-dessinée ( adultes / enfants )<br>
                    <b> 2015 - 2017</b> - Professeur de bande-dessinée dans trois écoles et un collège <br>
                    <b>2012 - 2014</b> - Contrat de professionnalisation de deux ans en alternance en BTS Design Graphique ( On
                    chuchote à mon oreille ) <br>
                    <b>2012</b> - Trois stages d’infographie d’un mois ( Télé Lyon Métropole ) ( Studio Dalton ) ( WR&S ) <br>
                    - Séjour en Angleterre ( quatre mois ) <br>- Stage de quatre mois ( Le Monde Change ) </p>
</div>



</div>



</div>




<!-- partie compétence -->
<div class="container mt-5 mb-5">
<div class="row">


<div class="col-sm-1">
<i class="fas fa-cogs fa-2x"></i>
</div>

<div class="col-sm-11">
<h3 class="h3A">Compétences</h3>
</div>

</div>

<div class="row">


<div class="col-12">
<p class="p5">
    Concevoir mockups, maquettes  et site web (HTML, CSS, JavaScript, PHP). Utilisation de bootstrap. Maîtrise de Github. Notions de sécurité numérique.
    Concevoir et gérer une base de donnée. Maitrise de Xamp, MySQL, jQuery et Ajax.<br><br>
    Réalisation de tous supports d’édition ( catalogues, kakémonos, carterie, Cartes à trou européen, Affiches, banderoles, 
    marque-pages, livres, packaging... ) Concevoir la mise en page et enrichir un document (intégration texte, image, correction...) selon les règles typographiques et la charte graphique. Analyser les besoins du client Traiter et retoucher des images numériques (colorimétrie, cadrage...). Réalisation d’illustrations.
     <br><br> </p>
</div>



</div>


<div class="row">
    <div class="col-12 col-md-6 d-flex justify-content-center">
    <img src="img/graphic-logiciels.png" class="img-fluid">
    </div>
    <div class="col-12 col-md-6 d-flex justify-content-center">
    <img src="img/graphic-web.png" class="img-fluid">
    </div>
</div>

</div>

    <div class="col-12 d-flex justify-content-center">
<p class="p4 mt-5"><a href="https://github.com/Robin-Paitry" class="git" target="-blank"><img src="img/github3.png" class="pr-2">Consulter mon Github</a></p>
</div></div>
</div>





<!-- partie diplomes -->
<div class="container">
<div class="row">


<div class="col-sm-1">
<i class="fas fa-graduation-cap fa-2x"></i>
</div>

<div class="col-sm-11">
<h3 class="h3A">Etudes et diplômes</h3>
</div>

</div>

<div class="row">


<div class="col-12">
<p class="p2">
              
<b>2019</b> - Formation titre professionnel développeur Web & Web mobile <br>
    - Attestation de sécurité numérique délivrée  l'Agence nationale de sécurité
des systèmes d'information (ANSSI)<br>
    
     
     <b> 2016</b> - Formation de perfectionnement sur les logiciels Photoshop, InDesign et Illustrator <br>
     <b>2014</b> - BTS Design Graphique <br>
     <b>2011 </b>- Module professionnel Infographie et Médias <br>
     <b>2010</b> - Probatoire en école de dessin <br>
     <b>2009</b> - B.A.F.A.         <br>
      -Baccalaureat E.S.
</div>



</div>



</div>


<!-- image banderole -->

<div class="container">
<div class="row">
<div class="col-12">

<img src="img/loisirs2.jpg" class="mb-5 img-fluid">

</div>
</div>

<div class="row">
    <div class="col-12 d-flex justify-content-center">
    <a href="img/cv-robin-paitry.pdf" download><img src="img/tele-cv2.png"></a> 
    </div>
</div>

</div>


<div class="container d-flex justify-content-center">
    <div class="row">
        <div class="col-12">
            <a href="page-web.php"><img src="img/gotopageweb.png"></a> 


</div>
</div>
</div>






    

    <!-- Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <!-- Custom JS -->
    <script src="js/main.js"></script>
    <script src="js/scroll.js"></script>
  
  
</body>

</html>

mon fichier main.js :

const init = () => {
  const openMenu = document.querySelector(`.js-open-menu`);
  const closeMenu = document.querySelector(`.site-menu-close`);

  const body = document.body;

  openMenu.addEventListener(`click`, () => {
    body.classList.add(`is-menu-open`);
  });
  closeMenu.addEventListener(`click`, () => {
    document.body.className = document.body.className.replace(`is-menu-open`, ``);
  });
};

init();

mon fichier scroll.js :


/** ***************************************************


* * * * Scrolling up & down* * */
$(document).ready(function(){    
$('a').on('click', function(evt){       
evt.preventDefault();  
 var target = $(this).attr('href');  $('html, body')  .stop() .animate({
scrollTop: $(target).offset().top
}, 1000 ); 
   });
  });
  /** ***************************************************  *   *   * Show button on scroll  *   *   *   */ 
 window.onscroll = function() {
scrollFunction()};   
 function scrollFunction() {   
 if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {      document.getElementById("myBtn").style.display = "block";  
  } else {      
document.getElementById("myBtn").style.display = "none";   
 }
 }

Merci d'avance pour vos réponses.

Afficher la suite

A voir également:

Conflit entre deux fichier JS
Fichier bin - Guide
Fichier epub - Guide
Fichier rar - Guide
Comment réduire la taille d'un fichier - Guide
Fichier .dat - Guide

4 réponses

Réponse 1 / 4

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

Bonjour,

Pour commencer, merci à l'avenir de poster le code correctement en utilisant la coloration syntaxique (en précisant le langage dans les balises de code tel qu'expliqué ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code)

Ensuite, dis nous ce qui s'affiche dans la console de ton navigateur sur la page qui te pose problème... si il y a un souci de code js il te le dira... et t'indiquera dans quel fichier et à quelle ligne.

Réponse 2 / 4

RobinPaitry

Bonjour,
navré pour le code j'ignorais que c'était possible.

Voici ce qui apparait dans la console lorsque je souhaite cliquer sur un lien du menu :


 Uncaught TypeError: Cannot read property 'top' of undefined                                                   scroll.js:16
    at HTMLAnchorElement.<anonymous> (scroll.js:16)
    at HTMLAnchorElement.dispatch (jquery.min.js:3)
    at HTMLAnchorElement.r.handle (jquery.min.js:3)
(anonymous) @ scroll.js:16

@***:3***@***:3

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

Le message semble correspondre à la ligne

 $(target).offset().top

il semble donc que $(target) n'existe pas
target provenant de :

 var target = $(this).attr('href');

Donc, quand tu cliques sur le lien... que contient le href de ce lien ?
Est-ce qu'un élément de ta page contient l'ID correspondant ?
Est-ce que tes balises HTML sont toutes correctes ? bien fermées ? pas d'erreur de syntaxe html dans ta page ?

Car ça ne semble pas être un souci de "conflit" js mais plus un problème de html...

Un test que tu peux faire, c'est mettre en commentaire ton script main.js et voir si le souci persiste ou non...

Réponse 3 / 4

Utilisateur anonyme

Bonjour

$(target) existe, sinon le message aurait été Cannot read property 'offset' of undefined.
C'est $(target).offset() qui n'existe pas, ou du moins vaut 'undefined'.
En effet, ton 'target' semble être l'url d'un href. C'est une chaîne de caractères, pas un élément du DOM. Or la fonction offset concerne les éléments du DOM.
De quel élément du DOM veux-tu avoir la position top ? C'est lui qu'il faut indiquer.

Réponse 4 / 4

RobinPaitry

J'ai essayé vos solution, ca n'a rien donné mais vous m'avez tout de même mis sur la voie.
en réalité le soucis venait d'au dessus :

$('a').on('click', function(evt)

le $('a') s'appliquer à tous mes liens.

du coup après modification:

$('#myBtn').on('click', function(evt)

Merci de votre aide et bonne fin de journée.

Votre réponse