Certains codes javascript ne fonctionnent plus

[Hyarmentir]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour (:

Ouverture d'un petit sujet suite à un soucisavec mes codes javascript.
Je m'en suis aperçu alors que j'étais en plein milieu d'un code à onglets difficile, et en isolant l'effet que je voulait sans les dits onglets ils m'est apparu que le code Javascript ne fonctionnait pas. Or, celui-ci fonctionne bien sur un logiciel et sur CodePen, je l'avais nettoyé et devrait tourner sans problème normalement.
J'avais ajouté il y'a quelques jours un autre code (effacé depuis) qui ne tournait pas non plus et j'avais mis ça sur l'annulation de deux scripts puisqu'aucun ne répondait, mais je me demande maintenant si le problème ne vient pas d'ailleurs. Mauvais langage ? Mauvais emplacement ? Ordre d'exécution qui écrase l'un ou l'autre code ?
N'étant pas un expert je viens donc tenter ma chance ici et vous remercie d'avance ♥

Voici le Javascript :

Code:

var bodyObj, className, index;

bodyObj = document.getElementById("pv");
index = 1;
className = ["llimgPV", "llimgPVop"];

function updateIndex() {
  if (index === 0) {
    index = 1;
  } else {
    index = 0;
  }
}

bodyObj.onclick = function(e) {
  e.currentTarget.className = className[index];
  updateIndex();
};

la partie CSS concernée :

Code:

#pv {
    height: 100%;
    width: 100%;
}

#pv.limgPV {
  clip-path: polygon(50% 0%, 93.30127% 25%, 93.30127% 75%, 50% 100%, 6.69873% 75%, 6.69873% 25%);
  width: 100px;
  height: 100px;
  background-size: cover;
  background-position:50% 50%;
  background-size:125px;
  opacity:0.5;
}

#pv.limgPVop {
  clip-path: polygon(50% 0%, 93.30127% 25%, 93.30127% 75%, 50% 100%, 6.69873% 75%, 6.69873% 25%);
  width: 100px;
  height: 100px;
  background-size: cover;
  background-position:50% 50%;
    background-size:125px;
  float:left;
}

et le code HTML nécessaire pour cet effet :

Code:

<div id="pv" class="llimgPV" style="background-image: url('http://i.imgur.com/nenNvDe.gif');"></div>

(l'effet ici est que lorsqu'on clique sur l'image elle est considérée comme active et retrouve son opacité totale) (c'est du bidouillage, je sais qu'il est possible de faire autrement mais ne me convient pas puisque nécessité que l'utilisateur modifie lui-même l'URL, et surtout, c'est le Javascript qui ne répond pas, le code fonctionnant normalement ailleurs)

Merci encore et bonne journée (:

[Neptunia]

Bonjour, et bienvenue sur le Forum des Forums Forumactif


Pourrions nous avoir un lien accessible sans se connecter où le code est en place ?

J'ai placé le script (sur l'index), le HTML (message page d'accueil) et le CSS et je n'ai absolument rien sur mon forum test.

[Hyarmentir]

Bonjour (:
Déjà, un grand merci pour cette réponse très rapide, et mes excuses j'étais persuadé avoir ouvert le forum.

Est-ce que ce sujet-ci est désormais bien visible ?

Et ici ( http://codepen.io/anon/pen/YxZJQr ) le code en prévisualisation sur Code Pen qui fonctionne bien quand on clique sur l'image. (il n'est pas nécessaire de s'incrire sur le site)

Encore merci d'avance !

[Neptunia]

et mes excuses j'étais persuadé avoir ouvert le forum.

Est-ce que ce sujet-ci est désormais bien visible ?

Et ici ( http://codepen.io/anon/pen/YxZJQr ) le code en prévisualisation sur Code Pen qui fonctionne bien quand on clique sur l'image. (il n'est pas nécessaire de s'incrire sur le site)

Encore merci d'avance !

Bah en fait comme l'adresse du forum est masquée, j'avais directement implanté css js et html sur un fofo test sans aucun résultat visible. Même pas pensé à regarder le lien de votre profil.

La console relève une erreur dans votre javascript
TypeError: bodyObj is null

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Erreurs/Unexpected_type

Je ne pourrais malheureusement pas vous aider davantage, suis déjà très limitée en jQuery, mais javascript bah c'est encore pire

[no_way]

Bonjour, vous essayez d'assigner l'élément avec pour id "pv" à la variable bodyObj mais au moment de l’exécution du script le DOM n'est pas encore chargé, l'élément n'existe donc pas encore ...

Mettez votre code entre ces lignes:

Code:

$(function(){
VOTRE CODE
});

Sinon, utiliser un id n'est pas forcément le mal absolu mais assurez-vous qu'il n'y aura qu'une occurrence de ce dernier dans votre page dans pareil cas !

[demeter1]

Bonjour à vous deux,
n'est il pas tout simplement possible d'utiliser la pseudo-classe :active plutôt que du js ?

[no_way]

Salut Demeter, l'utilisation de la pseudo-classe :active ne permet pas d'avoir pareil résultat, en fait ce qui s'en rapprocherait le plus serait la pseudo-classe :target et ce ne serait toujours l'idéal pour faire basculer l'état, l'idéal serait plutôt d'attribuer un attribut data sur l'élément et dans la mesure où il n'y a que 2 états désirés basculer sa valeur de 0->1->0 etc... par négation.

Tant que j'y suis je vous conseillerais de passer par la méthode on de jQuery pour attacher vos écouteurs d'événements:
http://api.jquery.com/on/

[Hyarmentir]

Un grand merci à tous pour vos réponses

Effectivement, avec :active j'avais déjà essayé dans tous les sens et cela ne s'applique que lorsque le clic est enfoncé pour disparaitre la demi-seconde après.

Merci beaucoup pour le code aussi, j'avais complètement oublié la function ! Du coup, j'ai modifié le bodyObj négligé par mes neurones et effectivement celà fonctionne bel et bien ! (:
Malheureusement, je retrouve le même problème avec d'autres codes et cela n'englobe qu'un seul élément à la fois. Je devrais passer par une autre méthode mais elle empêche malheureusement l'utilisateur de modifier l'URL à sa guise.
J'irais donc vers une autre apparence.

Ce sujet peut être fermé du coup puisqu'il ne concerne plus un problème de Javascript ne s'affichant pas (juste mon incompétence en JS....)

Encore merci et bonne journée (:

[no_way]

Si votre problème est réglé, il vous faut marquer votre sujet en résolu

Bonne continuation.

[Hyarmentir]

C'était bien le cas, j'avais cocher la box, mes excuses si ça n'a pas pris, je recommence (:

[no_way]

Il n'y a pas de mal bonne soirée !