Total débutant en JS mais qui s'accroche ...

Bonjour à tous. Je débute comlètement en JS, et j'aimerai changer de valeur ma variable "h" (heure) en cliquant sur un beau bouton (comme celui ci,par exemple en bas de l'écran, mais je ferai ça en CSS une fois le JS terminé ) ...

En gros, j'aimerai qu'en cliquant sur le 1er bouton (par défaut), on ait :

h = h_user

et en cliquant sur le 2ème, on ait :

h = h_Rafa

Je signale que ces deux fuseaux horaires ont été définis dans le JS, et qu'il fonctionnent... Je sèche complètement, déjà que dans mon code JS (c'est mon premier), il y a sûrement beaucoup de bricolage, mais tout fonctionne bien...
Si quelqu'un sait comment faire ça, je serai heureux de l'apprendre

Voici le lien du code Javascript de mon site, et le rendu finale est ici.

Salut,

Quand tu changes les fuseaux horaires, il faut aussi refaire les animations css, ça ne se fera pas seul .

PS: c'était mieux en svg, mon pc tourné pas autant… '^^.

J'avais utilisé cela :

HTML

<span id="Moi">Heure locale</span>
<span id="Rafa">Heure de la localisation de Rafael Nadal</span>

JS

elm_h_user = document.getElementById('Moi');
elm_h_Rafa = document.getElementById('Rafa');
elm_h_user.addEventListener('click', function() { h = h_user ;}, false);
elm_h_Rafa.addEventListener('click', function() { h = h_Rafa ;}, false);

Du coup, il me semblait bien que le problème était la ré-actualisation de l'horloge en CSS... Mais faut que je fasse comment concrètement, parce que je ne vois pas tellement comment y parvenir!

Il faut remplacé l'animation, ce qui veux dire :
- supprimer l'animation mis en place
- mettre une nouvelle animation

Au lieu de toujours vérifier si styleSheets existe dans document, autant créer systématiquement un élément style.
Donc, à mettre au début

    //crée une balise style dédier au keyframe de elem3.
    var keyframeElem3 = document.createElement( 'style' );
    document.getElementsByTagName( 'head' )[0].appendChild(keyframeElem3);

    //fonction pour mettre à jour le keyframe
    var keyframeHUpdate = function(){
        keyframeElem3.innerHTML = '@' + keyframeprefix + 'keyframes rotate-h {' +
            'from {' + keyframeprefix + 'transform:rotate(' + (30 * h) + 'deg) }' +
            'to {' + keyframeprefix + 'transform:rotate(' + (360 + (30 * h)) + 'deg ) }' +
        '}';
    }

Le contenu du if pour positionner l'aiguille de l'heure serait remplacé par:

   keyframeHUpdate();
   elm3.style[ animationstring ] = 'rotate-h 43200s linear infinite';

Et les événements de clique par

elm_h_user.addEventListener('click', function() {
    h = fuseau_user + (new Date()).getUTCHours() ;
    keyframeHUpdate() ;
}, false);
elm_h_Rafa.addEventListener('click', function() {
    h = fuseau_Rafa + (new Date()).getUTCHours() ;
    keyframeHUpdate() ;
}, false);

Merci de ton aide! Je pense que tu n'es pas loin d'avoir trouvé la solution, mais je ne comprends pas pourquoi ça ne fonctionne toujours pas

Ici le nouveau fichier avec les modifications que tu m'as dit ci-dessus : Nouveau et son résultat est toujours à la même adresse.

Ici l'ancien : Vieux

Je pense avoir fait les bons changements dans le code, pourtant...

Presque, tu as juste oublier d'enlever une partie de ton code. Dans le dernier if, les 2 lignes que je t'ai passés suffisent, le reste est à supprimer car rentre en conflit avec keyframeUpdate().

PS : Tu as inverser le nouveau et l'ancien script dans t'es liens.

Désolé pour les liens, en effet, j'ai interverti (je m'emmèle les pinceaux ^^)

En effet, j'avais oublié de supprimer cette partie, mais le résultat est identique : pas de changement... J'ai encore oublié quelque chose ou pas?