Problème avec getElementsByClassName ou querySelector (Créer un compte)

  • WordPress :5.8
  • Statut : non résolu
  • Ce sujet contient 2 réponses, 3 participants et a été mis à jour pour la dernière fois par ferman, le il y a 13 minutes.
3 sujets de 1 à 3 (sur un total de 3)
  • Auteur
    Messages
  • #2384955
    Af1ne
    Participant
    Initié WordPress
    1 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 7.3
    • Thème utilisé : Oceanwp child
    • Extensions en place : Ultimate Addons for Gutenberg
    • Nom de l’hébergeur : Infomaniak
    • Adresse du site : https://soniaarbouche.com/

    Problème(s) rencontré(s) :

    Bonjour,

    OBJECTIF
    Mon objectif est de modifier le contenu de ma balise H2 (Accompagnement fin de vie) au survol des différentes sphères.
    onHover sur la sphère rose, le titre affiche “Musicienne”
    onHover sur la sphère violette, le titre affiche “Accompagnement périnatal” et ainsi de suite.

    CONFIG ACTUELLE

    J’ai une animation par Keyframes qui fait défiler les 5 titres.

    .serviceTitleMobile:before {
    		content: "Musicienne";
        animation: changingWord infinite 10s;	
    }
    
    .serviceTitleDesktop:before {
    		content: "Musicienne";
        animation: changingWord infinite 10s;	
    }

    J’ai réussi à mettre en place mon javascript dans mon thème enfant comme ceci dans le fichier functions.php:

    function wpb_hook_javascript() {
    if (is_page ('305')) { 
            ?>
    <script type="text/javascript">
      		
      		console.log("pouet pouet");
      		const title = document.getElementsByClassName('serviceTitleDesktop')[1];
       		console.log(title);
    
      
    </script>
        <?php
        }
    }
    add_action('wp_head', 'wpb_hook_javascript');

    Mon console.log(“pouet pouet”), fonctionne.
    Mon console.log const title = document.getElementsByClassName(‘serviceTitleDesktop’) me retourne bien un tableau (cf pj)
    Mais quand je veux accéder aux valeurs du tableau const title = document.getElementsByClassName(‘serviceTitleDesktop’)[0], je me retrouve avec “undefined”
    Lorsque j’utilise le méthode document.querySelector(‘.serviceTitleDesktop’) qui me retourne un null !

    J’ai essayer sur une autre balise titre qui n’a pas d’animation…

    Comment cible t’on un élément pour modifier une caractéristique CSS en JS dans wordpress svp ?
    Une novice (un peu au bout du roul’! )

    Merci  d’avance pour votre aide

    Delph

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2385368
    bopi1829
    Participant
    Initié WordPress
    17 contributions

    Tu as essayer de mettre des breakpoints dans ton code et d’observer les résultats obtenus en console ?

    Cela t’aidera peut-être à trouver la solution à ton problème

    #2385374
    ferman
    Participant
    Maître WordPress
    4413 contributions

    Bonjour,

    Le code est correct mais le hook ne l’est peut-être pas.  C’est difficile d’être sûr sans voir le site mais chez moi, dans un cas similaire,  il faut utiliser wp_footer. Fonction test:

    function wpb_hook_javascript() {
    if (is_page (100)) { 
            ?>
    <script type="text/javascript">
      			
      		const title = document.getElementsByClassName('toto')[1];
       		 (title).style.backgroundColor="red" ;
    		 
    </script>
        <?php
        }
    }
    add_action('wp_footer', 'wpb_hook_javascript');
    head ne marche pas

    Pareil pour querySelectorAll(‘.toto’)[1]. querySelector ne marche pas  (n’est pas unique).

    • Cette réponse a été modifiée le il y a 4 minutes par ferman.
    • Cette réponse a été modifiée le il y a 22 secondes par ferman.
3 sujets de 1 à 3 (sur un total de 3)
  • Vous devez être connecté pour répondre à ce sujet.